使用 AngularJs、Spike Engine 和 Twitter Bootstrap 构建 HTML5 聊天室

• 下载源代码 - 1.5 MB

引言

互联网上的一切都越来越实时化，HTML5 最终提供了一些工具，可以在 Web 上构建高效、简单和强大的实时应用程序。本文演示了如何使用 Google 的 AngularJS 框架进行前端渲染来构建 HTML5 聊天室。

1. 它使用 HTML5 Data URI 来渲染从服务器流式传输为字节数组的图像，并使用 identicons 作为头像。
2. 它使用 CSS3 进行样式设计，并使用 JQuery 进行动画处理。
3. 它使用自定义字体和 Google 的 AngularJS 进行客户端。
4. 它是 跨平台的，并且具有最小化的数据包有效负载和 消息压缩。
5. 应用程序服务器是一个 自托管的可执行文件，客户端只是一个 普通的 html 文件。

[在线演示]

服务器端实现

本文是我们之前文章的延续和改进，之前演示了 一个使用 Spike Engine 作为后端的 jquery 聊天框。在本文中，我们显着改进了客户端，而没有对服务器实现进行任何重大更改。

服务器端实现在上一篇文章中有详细描述，如果您之前没有阅读过，请阅读。.

客户端实现

AngularJS 是一个 MVC 框架，由您的浏览器渲染。它允许我们做的一件事是，通过删除创建 DOM 部分并附加它们的所有代码来改进我们之前的 JQuery 实现。相反，AngularJS 允许我们简单地 数据绑定 我们从服务器获取的数据。

在上图中，您可以看到 AngularJS 数据绑定是如何工作的。由于视图只是模型的投影，因此控制器与视图完全分离并且不知道它。

为了制作聊天室，我们首先需要实现执行实际渲染的模板，为此我们创建一个 NgChatCtrl，它将成为我们的控制器，并向作用域添加一些字段，我们需要一个用于 messages，一个用于 messageText，以便输入并发送到客户端。

此外，在控制器中，我们有两个超出范围的变量，用于我们的服务器和聊天气泡的翻转侧。需要注意的重要一点是，在下面的代码中，IP 地址指向 127.0.0.1，这意味着只有本地浏览器才能访问服务器。如果服务器投入生产，则此地址实际上应该是公共 IP / 主机名。

function NgChatCtrl($scope) {
    // Our server to connect to
    var 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，它会自动重复我们 DOM 中的 <div>。我们还为头像交替绑定类，并绑定头像和文本属性。

我们必须做的最后一件事是将 messageText 属性绑定到文本框，并允许我们实际向服务器发送消息。

<div id="browser-window" ng-app ng-controller="NgChatCtrl">
    <div id="viewport">
        <div id="viewport-content">
            <div class="bubble-container" ng-repeat="m in messages">
                <div class="avatar avatar-{{m.side}}"><img src="{{m.avatar}}" /></div>
                <div class="bubble bubble-{{m.side}}">{{m.text}}</div>
            </div>
        </div>
    </div>

    <form class="row row-chat" ng-submit="sendMessage()">
        <div class="input-group">
            <input type="text" class="form-control" ng-model="messageText" placeholder="Type your message" />

            <span class="input-group-btn">
                <button type="submit" class="btn btn-primary">Send</button>
            </span>
        </div>

    </form>
</div>

 

历史

• 2015 年 6 月 23 日 - 源代码和文章已更新为 Spike v3
• 2014/07/12 - 部署说明
• 2014/06/20 - 初始版本