什么是 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 实现了一个简单的聊天室功能：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------- ------------ ------- ----- -------------- ----------------------------- ------------- --------- ---- --- ------------------ -- -------------------------- ----- ----- -------------------------- ------ ----------- ---------------- ------- --------------------------- ------- ------- ------------------------------------------------------------------------------------ -------- ----------------------- --- --------------------------- -------------------- ------- - --- -- - ---------------------------------- --------------- - --- ---------------------------- - --------------------------------- ---------------- --- ------------------ - ---------- - --------------------- ----------- - --- -- --- --------- ------- -------展开代码
这个应用包含一个文本框和一个按钮，用于发送消息，以及一个列表，用于显示消息。当用户输入一条消息并点击发送按钮时，应用会将消息发送到 WebSocket 服务器，并将其显示在列表中。当应用接收到新的消息时，它会将其添加到列表中，并更新视图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d51dcaa941bf71349762b5
