AngularJs聊天,Spike引擎和 Twitter Bootstrap

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

因特网上的所有东西都变得越来越实时,HTML5最终提供了一些设施来构建高效。简单的实时应用。 本文演示了如何使用for在前端渲染中构建HTML5聊天。

  • 它使用HTML5的数据 URI 以字节数组和 avatars identicons的形式呈现从服务器流出来的图像。
  • 它使用了的CSS3,为动画制作了 JQuery。
  • 它使用定制的字体和AngularJS的客户端来支持客户端。
  • 它是跨平台和一个最小化的数据包负载和消息压缩。
  • 应用服务器是一个收费的自托管可执行,客户机只是一个的普通html文件。

[Live Demo]

服务器端实现

本文是前一篇文章 continuation 聊天框( Spike ),是一个延续和改进,它是使用Spike引擎编写的一个jquery聊天框。 本文在不做任何重大更改的情况下对客户端进行了大量的修改。

在前一篇文章中详细介绍了服务器端实现,如果你没有阅读本文之前阅读过它,请阅读它。

客户端实现

AngularJS是一个由浏览器呈现的MVC框架。 它允许我们做的一件事是通过删除创建DOM部件的所有代码来改进前一个JQuery实现。 我们只允许使用数据绑定数据绑定数据,我们从服务器获得数据。

在图 上面 中,你可以看到AngularJS数据绑定是如何工作的。 因为视图只是模型的投影,所以控制器完全与视图分离,不知道它。

我们必须先实现模板,然后再创建 NgChatCtrl,并将添加到范围中,并将它的添加到 messages 中,然后再发送给客户端。

这里外,在控制器中,我们的服务器有两个范围变量,和聊天泡沫的翻转侧。 要注意的重要一点是,下面的代码指向 127.0.0.1,这意味着只有本地浏览器可以访问服务器。 如果服务器进入生产环境,这个地址实际上应该是 public ip/主机名。
function NgChatCtrl($scope) {
 // Our server to connect tovar server = new spike.ServerChannel('http://127.0.0.1:8002');
 var side = 'left';
 // Messages, client info & sending $scope.messages = [];
 $scope.sendMessage = function () {
 server.sendNgChatMessage($scope.messageText);
 $scope.messageText = "";
 };
 // Occurs when we receive chat messages server.on('ngChatMessagesInform', function (p) {
 $scope.messages.push({
 avatar: "data:image/png;base64," + p.avatar.toBase64(),
 text: p.message,
 side: side
 });
 $scope.$apply();
 // Animate $("#viewport-content").animate({
 bottom: $("#viewport-content").height() - $("#viewport").height()
 }, 250);
 // flip the side side = side == 'left'? 'right' : 'left';
 });
 // Once connected, we need to join the chat server.on('connect', function () {
 server.joinNgChat();
 });
}

可以看到,对于我们所需要显示的每个消息,我们只需插入 ngChatMessagesInform 事件并为每个代表聊天消息的消息推一个新。 我们也翻转侧面,因为我们想要替换在左边或者在气泡右边的人物。

我们的模板比较简单。 要注意的一点是,我们有 ng-repeat,它将重复automatilly的<div inside>。 我们还为化身交互提供数据绑定类,并且绑定了化身和文本属性。

我们最后要做的就是将 messageText 属性绑定到文本框,并允许我们实际发送消息到服务器。
<divid="browser-window"ng-appng-controller="NgChatCtrl"><divid="viewport"><divid="viewport-content"><divclass="bubble-container"ng-repeat="m in messages"><divclass="avatar avatar-{{m.side}}"><imgsrc="{{m.avatar}}"/></div><divclass="bubble bubble-{{m.side}}">{{m.text}}</div></div></div></div><formclass="row row-chat"ng-submit="sendMessage()"><divclass="input-group"><inputtype="text"class="form-control"ng-model="messageText"placeholder="Type your message"/><spanclass="input-group-btn"><buttontype="submit"class="btn btn-primary">Send</button></span></div></form></div>

历史记录

  • 1 - 更新到 Spike Spike的源代码项目
  • 12/07/2014部署说明
  • 20/06/2014 - 初始版本

BOO  angular  引导  Bootstrap  Html5  Twitter  
相关文章