在实时数据通信方面，WebSocket 是一种非常有效的技术，它可以在客户端与服务器之间建立持久化的、双向的通信连接。在 AngularJS 单页应用程序 (SPA) 中，可以使用 WebSocket 技术来实现实时数据通信，使得客户端能够实时地接收来自服务器端的数据更新。
本文将会介绍 AngulaJS 中如何使用 WebSocket 技术来实现实时数据通信。我们将会讨论以下主题：
- WebSocket 协议的简介
- AngularJS 中如何集成 WebSocket
- WebSocket 实现实时数据通信的示例代码
WebSocket 协议的简介
WebSocket 是一种在客户端与服务器之间建立双向通信连接的网络协议。在传统的 HTTP 协议中，客户端请求服务器时，服务器会返回请求的结果并终止连接，客户端需要再次发起请求才能获取最新的数据。而 WebSocket 协议在建立连接后，客户端与服务器之间的通信管道是持久化的，双方都可以随时发送消息，通信过程类似于聊天软件中的即时通讯。
WebSocket 协议与 HTTP 协议的主要区别在于，HTTP 是无状态的，每次请求响应之间是独立的。而 WebSocket 协议在通信过程中会保持连接，双方可以随时发送消息，实现实时通信。
AngularJS 中如何集成 WebSocket
在 AngularJS 中，使用 WebSocket 技术实现实时数据通信，需要在客户端加载 WebSocket 库，并且借助 AngularJS 的 $scope 和 $http 等服务来实现数据的双向绑定。
首先，我们需要在客户端加载 WebSocket 库，可以通过以下代码来加载：
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.0/dist/browser/signalr.min.js"></script>
接下来，在 AngularJS 应用程序中注册 WebSocket 服务：
-- -------------------- ---- ------- --------------------- --- ---------------------- ---------- - --- ---------- - --- ------------------------------ ---------------- --------- ------ - ------ ---------- - ------ ------------------- -- --- --------------- --- - ------ -------------------- ---- -- ------- ---------------- - --- ---- - ------------------------------------- --- ------ ----------------------------------- ----------------------- - -- ---展开代码
code: html
<script></script>code: javascript angular.module('app', []) .factory('signalRHub', function() { var connection = new signalR.HubConnectionBuilder() .withUrl("/api") .build(); return { start: function() { return connection.start(); }, on: function(event, fn) { return connection.on(event, fn); }, invoke: function(method) { var args = Array.prototype.slice.call(arguments, 1); return connection.invoke.apply(connection, [method].concat(args)); } }; });
在上面的代码中，我们先通过 signalR.HubConnectionBuilder() 创建了一个连接对象，然后可以通过该对象的 start() 方法来启动连接，on() 方法来监听连接事件，invoke() 方法来向服务器发送消息。
需要注意的是，我们在该代码中使用的是一个名为 signalR 的 WebSocket 库，该库可以与多种不同的服务端实现进行配合使用。
WebSocket 实现实时数据通信的示例代码
在上面的代码中，我们定义了一个名为 signalRHub 的 AngularJS 服务，该服务封装了 WebSocket 的连接、启动、监听和消息发送等操作。接下来，我们可以通过该服务来实现实时数据通信。
-- -------------------- ---- ------- --------------------- --- --------------------------- ---------------- ----------- - --------------- - --- ---------------------------------- - --------------------------- ----------------- - ------------------------------ ---------------- --- --- ------------------ - ----------------- - -------------------------------- --------- -- ---展开代码
code: javascript angular.module('app', []) .controller('myController', function($scope, signalRHub) { $scope.messages = [];
-- -------------------- ---- ------- ---------------------------------- - --------------------------- ----------------- - ------------------------------ ---------------- --- --- ------------------ - ----------------- - -------------------------------- --------- --展开代码
});
在上面的代码中，我们首先定义了一个名为 myController 的 AngularJS 控制器，该控制器通过依赖注入的方式注入 signalRHub 服务，以便能够使用 WebSocket 技术实现实时数据通信。
在该控制器中，我们定义了一个名为 messages 的 $scope 变量，用来存储接收到的服务器端的消息。我们还定义了一个名为 sendMessage 的 $scope 函数，用来向服务器端发送消息。
在控制器的初始化函数中，我们首先通过 signalRHub.start() 方法来启动 WebSocket 连接，接着使用 signalRHub.on() 方法来监听服务器端发送的 newMessage 事件。一旦监听到该事件，就会将接收到的消息存储在 messages 变量中，并通过 $scope.$apply() 方法来更新视图。
通过上面的代码，我们可以在 AngularJS 单页应用中实现 WebSocket 技术的实时数据通信，让客户端能够实时接收到来自服务器端的消息更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd8ecee46428fe9e7254cf
