在 AngularJS 中使用 WebSocket 的教程及常见错误解决方法-JavaScript中文网-JavaScript教程资源分享门户

什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得客户端和服务器之间可以实时地进行双向通信，而不需要像 HTTP 一样每次请求都要建立新的连接。WebSocket 协议通常用于实时应用程序，如在线游戏、聊天室、股票报价等。

如何在 AngularJS 中使用 WebSocket？

在 AngularJS 中使用 WebSocket 可以通过内置的 $websocket 服务来实现。首先，在你的 AngularJS 应用中注入 $websocket 服务：

angular.module('myApp', []).controller('myController', function($websocket) {
  // ...
});

然后，创建 WebSocket 连接：

var ws = $websocket('ws://localhost:8080');

这里假设 WebSocket 服务器运行在本地主机的端口 8080 上。如果你需要使用 SSL/TLS 加密连接，可以使用 wss 协议：

var ws = $websocket('wss://example.com');

接下来，你可以使用 ws 对象来发送和接收消息。例如，发送一个消息：

ws.send('Hello, world!');

接收消息需要注册一个回调函数来处理消息：

ws.onMessage(function(event) {
  console.log('Received message:', event.data);
});

完整的代码如下：

angular.module('myApp', [])
  .controller('myController', function($websocket) {
    var ws = $websocket('ws://localhost:8080');
    ws.send('Hello, world!');
    ws.onMessage(function(event) {
      console.log('Received message:', event.data);
    });
  });

常见错误解决方法

1. WebSocket 连接失败

如果 WebSocket 连接失败，可能是因为服务器没有正确地响应连接请求，或者防火墙阻止了连接。你可以在浏览器的控制台中查看错误消息，以找出具体的原因。

2. 跨域访问限制

默认情况下，浏览器不允许从一个域名访问另一个域名的 WebSocket 服务。这是为了防止跨站点脚本攻击。如果你需要从 AngularJS 应用中访问另一个域名的 WebSocket 服务，你需要在服务器端设置 CORS（跨域资源共享）头。例如，如果你的 AngularJS 应用运行在 http://localhost:8000 上，而 WebSocket 服务运行在 http://example.com:8080 上，你可以在服务器端设置如下的 CORS 头：

Access-Control-Allow-Origin: http://localhost:8000

这样，浏览器就允许从 http://localhost:8000 访问 http://example.com:8080 的 WebSocket 服务了。

3. WebSocket 连接断开

如果 WebSocket 连接断开了，可能是因为服务器关闭了连接，或者网络出现了问题。你可以在浏览器的控制台中查看错误消息，以找出具体的原因。

示例代码

下面是一个完整的 AngularJS 应用，它通过 WebSocket 实现了一个简单的聊天室功能：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket Chat</title>
</head>
<body ng-app="myApp" ng-controller="myController">
  <h1>WebSocket Chat</h1>
  <ul>
    <li ng-repeat="message in messages">{{message}}</li>
  </ul>
  <form ng-submit="sendMessage()">
    <input type="text" ng-model="text">
    <button type="submit">Send</button>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script>
    angular.module('myApp', [])
      .controller('myController', function($websocket, $scope) {
        var ws = $websocket('ws://localhost:8080');
        $scope.messages = [];
        ws.onMessage(function(event) {
          $scope.messages.push(event.data);
          $scope.$apply();
        });
        $scope.sendMessage = function() {
          ws.send($scope.text);
          $scope.text = '';
        };
      });
  </script>
</body>
</html>

这个应用包含一个文本框和一个按钮，用于发送消息，以及一个列表，用于显示消息。当用户输入一条消息并点击发送按钮时，应用会将消息发送到 WebSocket 服务器，并将其显示在列表中。当应用接收到新的消息时，它会将其添加到列表中，并更新视图。

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

在 AngularJS 中使用 WebSocket 的教程及常见错误解决方法