AngularJS、Socket.io 实现实时聊天-JavaScript中文网-JavaScript教程资源分享门户

在现代 web 应用程序中，实时聊天功能已成为必不可少的组成部分。本文将介绍如何使用 AngularJS 和 Socket.io 实现实时聊天。我们将首先讨论 AngularJS 和 Socket.io 的概念，然后深入了解如何使用它们实现实时聊天功能。

AngularJS

AngularJS 是一款由 Google 开发的前端框架。它是一款 MVVM（模型视图视图模型）框架，支持双向数据绑定和依赖注入。AngularJS 还提供了许多常用的组件和指令，使开发人员能够更轻松地构建富客户端应用程序。

在 AngularJS 中，我们使用指令来扩展 HTML 的功能。指令是以 ng- 开头的标记，例如 ng-model、ng-bind 和 ng-click。AngularJS 在 DOM 加载后会扫描指令，然后将它们转化为 JavaScript 代码。这个过程被称为编译。

AngularJS 还支持过滤器，用于格式化文本和数据。这些过滤器可以在指令和表达式中使用。

Socket.io

Socket.io 是一个基于事件的实时通讯框架。它支持双向通信，可以在客户端和服务器端之间建立实时连接。

在 Socket.io 中，我们使用 socket 对象进行通信。使用 socket.emit() 方法向服务器发送消息，使用 socket.on() 方法侦听服务器发来的消息。

实现实时聊天

为了实现实时聊天功能，我们需要使用 AngularJS 和 Socket.io。我们将首先创建一个聊天室页面，然后使用 Socket.io 在客户端和服务器端之间建立实时连接来实现消息的实时传递。

创建聊天室页面

我们将创建一个基于 AngularJS 的单页应用程序。在 AngularJS 中，我们使用路由指令来定义不同页面的视图。在本例中，我们将使用 ui-router（一个 AngularJS 第三方模块）来定义不同页面的视图。

首先，我们需要引入 AngularJS 和 ui-router 命名空间：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="chatApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.25/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  </body>
</html>

接下来，我们将定义一个名为 chatApp 的 AngularJS 模块，并添加一个 config 配置函数来配置路由。我们将定义两个路由：一个是聊天室页面，一个是登录页面。如果用户未登录，则重定向到登录页面。

// www.javascriptcn.com code example
var app = angular.module('chatApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('chat', {
    url: '/chat',
    templateUrl: 'chat.html',
    controller: 'ChatCtrl',
    resolve: {
      user: function(AuthService) {
        return AuthService.getUser();
      }
    }
  });

  $stateProvider.state('login', {
    url: '/login',
    templateUrl: 'login.html',
    controller: 'LoginCtrl'
  });

  $urlRouterProvider.otherwise('/login');
});

在上面的代码中，我们使用 resolve 属性来调用 AuthService.getUser() 方法，在聊天室页面加载之前检查用户是否已经登录。如果用户未登录，则页面会重定向到登录页面。

实现登录页面

我们将在登录页面中实现用于登录的表单。创建一个名为 login.html 的文件，并添加以下 HTML 代码：

// www.javascriptcn.com code example
<div>
  <h1>登录</h1>
  <form ng-submit="login()">
    <div>
      <label for="username">用户名：</label>
      <input type="text" ng-model="username"/>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" ng-model="password"/>
    </div>
    <div>
      <button type="submit">登录</button>
    </div>
  </form>
</div>

在上面的代码中，我们定义了一个名为 login() 的函数，将在用户提交表单时调用。该函数将获取 username 和 password，然后使用 AuthService.login() 方法进行验证。如果用户通过验证，则重定向到聊天室页面。

实现聊天室页面

在聊天室页面中，我们将创建一个聊天窗口，用于显示用户发送和接收的消息。我们还将添加一个表单，使用户能够发送消息。

首先，我们将在 chat.html 文件中定义聊天窗口：

// www.javascriptcn.com code example
<div>
  <h1>聊天室</h1>
  <div>
    <ul>
      <li ng-repeat="message in messages track by $index">{{message}}</li>
    </ul>
  </div>
  <form ng-submit="sendMessage()">
    <div>
      <input type="text" ng-model="messageText"/>
    </div>
    <div>
      <button type="submit">发送</button>
    </div>
  </form>
</div>

在上面的代码中，我们使用 ng-repeat 指令在聊天窗口中显示消息列表。我们还定义了一个名为 sendMessage() 的函数，将在用户提交表单时调用。该函数将获取 messageText，并使用 socket.emit() 方法将消息发送给服务器。

接下来，在 app.js 文件中，我们将初始化 Socket.io，并创建一个名为 ChatCtrl 的控制器：

// www.javascriptcn.com code example
app.controller('ChatCtrl', function($scope, user) {
  var socket = io.connect();

  $scope.username = user.username;

  socket.emit('join', {username: $scope.username});

  $scope.messages = [];

  $scope.sendMessage = function() {
    socket.emit('message', {text: $scope.messageText});
    $scope.messageText = '';
  };

  socket.on('message', function(data) {
    $scope.messages.push(data.text);
    $scope.$apply();
  });
});

在上面的代码中，我们将用户的用户名存储在 $scope.username 中，并在连接时使用 socket.emit() 方法将其发送到服务器。我们还定义了一个名为 sendMessage() 的函数，并使用 socket.emit() 方法将消息发送到服务器。

我们在 $scope.messages 中存储消息列表，并在接收到服务器发来的消息时使用 socket.on() 方法添加新消息到 $scope.messages 中。由于 Socket.io 在内部异步处理消息，因此我们在接收到新消息后需要手动调用 $scope.$apply() 来更新消息列表。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7bd0aa941bf7134ddeb33

AngularJS、Socket.io 实现实时聊天