AngularJS 和 SSE 实现实时聊天室-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，实时聊天室是一个非常常见的应用场景。实现实时聊天室需要前端和后端共同协作，其中前端需要使用一些特定的技术实现实时通信。本文将介绍如何使用 AngularJS 和 SSE（Server-Sent Events）实现实时聊天室。

AngularJS 简介

AngularJS 是一个由 Google 推出的开源 JavaScript 框架，用于构建动态 Web 应用程序。它提供了一种声明式的方式来定义 UI 和业务逻辑，使开发者可以更加专注于业务逻辑的实现。

AngularJS 的核心是 MVVM（Model-View-ViewModel）模式，它将应用程序的数据模型（Model）与用户界面（View）分离，并提供了一个 ViewModel 来协调两者之间的交互。AngularJS 还提供了许多其他功能，例如依赖注入、指令、过滤器等。

SSE 简介

SSE（Server-Sent Events）是一种基于 HTTP 的实时通信协议，它允许服务器向客户端发送事件流。与传统的 Ajax 请求相比，SSE 具有更低的延迟和更高的可靠性，因为它使用长连接而不是短连接。

SSE 通过一个特殊的 HTTP 响应头 Content-Type: text/event-stream 来声明事件流。服务器可以向客户端发送多个事件，每个事件都有一个特定的类型和数据。客户端可以通过 JavaScript 的 EventSource 对象来订阅事件流，并在收到事件时执行相应的回调函数。

实现实时聊天室

下面我们将使用 AngularJS 和 SSE 来实现一个简单的实时聊天室。我们将使用 Node.js 作为后端，使用 Express 框架来提供 HTTP 服务。在前端，我们将使用 AngularJS 和 Bootstrap 框架来构建 UI。

后端实现

首先，我们需要创建一个 Node.js 项目，并安装以下依赖项：

npm install express cors

然后，我们创建一个名为 server.js 的文件，并编写以下代码：

// javascriptcn.com 代码示例
const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())

app.get('/chat', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream')
  res.setHeader('Cache-Control', 'no-cache')
  res.setHeader('Connection', 'keep-alive')

  setInterval(() => {
    const data = {
      type: 'message',
      text: 'Hello, world!'
    }

    res.write(`data: ${JSON.stringify(data)}\n\n`)
  }, 1000)
})

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

这段代码创建了一个 Express 应用程序，并在 /chat 路径上提供 SSE 服务。当客户端连接到该路径时，服务器将发送一个名为 message 的事件流，每秒钟发送一次。我们可以通过修改 data 对象来发送不同的消息。

前端实现

接下来，我们将使用 AngularJS 和 Bootstrap 框架来构建前端 UI。我们首先需要创建一个名为 index.html 的文件，并引入必要的依赖项：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Real-time Chat</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body ng-app="chatApp">
    <div ng-controller="ChatController as chat">
      <div class="panel panel-default">
        <div class="panel-heading">Real-time Chat</div>
        <div class="panel-body">
          <ul class="list-group">
            <li class="list-group-item" ng-repeat="message in chat.messages track by $index">
              {{message.text}}
            </li>
          </ul>
        </div>
        <div class="panel-footer">
          <form ng-submit="chat.sendMessage()">
            <div class="input-group">
              <input type="text" class="form-control" ng-model="chat.messageText" placeholder="Type your message...">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Send</button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

这段代码创建了一个基本的 UI，包括一个聊天消息列表和一个输入框。我们还需要创建一个名为 app.js 的文件，并编写以下代码：

// javascriptcn.com 代码示例
angular.module('chatApp', [])
  .controller('ChatController', function ($http) {
    var self = this
    self.messages = []
    self.messageText = ''

    var source = new EventSource('/chat')

    source.addEventListener('message', function (event) {
      var data = JSON.parse(event.data)
      if (data.type === 'message') {
        self.messages.push(data)
        $scope.$apply()
      }
    })

    self.sendMessage = function () {
      var data = {
        type: 'message',
        text: self.messageText
      }

      $http.post('/chat', data)
        .then(function () {
          self.messageText = ''
        })
    }
  })

这段代码创建了一个名为 ChatController 的 AngularJS 控制器，并在其中定义了 messages 和 messageText 两个变量，分别用于存储聊天消息列表和用户输入的消息文本。

我们还使用 EventSource 对象来订阅 SSE 事件流，并在收到消息时将其添加到 messages 列表中。注意，我们需要使用 $apply 方法来通知 AngularJS 更新 UI。

最后，我们还定义了一个 sendMessage 方法，用于向服务器发送用户输入的消息。我们使用 $http 服务来发送 POST 请求，并在请求完成后清空输入框。

总结

本文介绍了如何使用 AngularJS 和 SSE 实现实时聊天室。我们首先介绍了 AngularJS 和 SSE 的基本概念，然后使用 Node.js 和 Express 框架实现了后端 SSE 服务，并使用 AngularJS 和 Bootstrap 框架构建了前端 UI。通过本文的学习，读者可以了解到如何使用 AngularJS 和 SSE 来实现实时通信功能，并可以将这些知识应用到自己的项目中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65519014d2f5e1655db4dda7