在现代的网络应用开发中，实时性越来越重要，传统的 HTTP 连接已经不能满足实时通信的需要。而 WebSocket 协议的出现为实现实时通信提供了一种全新的解决方案。socket.io 就是一种基于 WebSocket 的实时通信库，而 angular.js 是一款流行的前端框架。本教程将介绍如何将 socket.io 和 angular.js 搭配使用，打造实时性强的前端应用。
WebSocket 和 socket.io
WebSocket 是一种双向通信协议，它建立在 TCP 协议之上，使得服务器端和客户端可以进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 可以保持长连接，随时发送和接收数据。
使用原生的 WebSocket 协议进行通信需要编写一些比较底层的代码。而 socket.io 就是解决这个痛点的库，它封装了 WebSocket 协议，提供了更加方便的使用方式。socket.io 支持多种协议（包括 WebSocket、XHR-polling、JSONP-polling 等），可以自动选择最佳的通信方式。它还提供了房间（Room）和命名空间（Namespace）等高级特性，方便实现不同类型的通信。
搭配使用 socket.io 和 angular.js
在 angular.js 中使用 socket.io 需要先安装 socket.io-client 库。可以使用 npm 安装，也可以直接从官网下载后放在项目中：
<head>
<script src="/socket.io/socket.io.js"></script> <!-- 官网下载的文件放在静态文件夹中 -->
<script src="/node_modules/socket.io-client/dist/socket.io.js"></script> <!-- 使用 npm 安装后的路径 -->
</head>安装完成后，可以在 angular.js 的控制器（Controller）中使用 socket.io，监听服务器发来的消息：
// javascriptcn.com 代码示例
app.controller('MyController', function($scope) {
var socket = io.connect('http://localhost:3000'); // 根据实际情况修改服务器地址和端口号
socket.on('news', function(data) {
console.log(data);
$scope.$apply(function() { // 注意需要手动更新视图
// 更新 $scope 中的数据，以便在模板中显示
$scope.news = data;
});
});
});上述代码中，我们先使用 io.connect 方法连接服务器，然后监听名为 "news" 的消息。当服务器发送 "news" 消息时，就会触发回调函数。在回调函数中，我们打印出服务器发来的数据，并手动更新了 $scope，以便在模板（Template）中显示。
与传统的 HTTP 请求不同，socket.io 的通信方式是基于事件（Event）的。服务器和客户端可以通过 emit 和 on 方法向对方发送事件和监听事件。
在 angular.js 中，我们可以封装一个服务（Service），通过注入该服务到控制器中，从而实现不同控制器之间的数据共享：
// javascriptcn.com 代码示例
app.service('socketService', function() {
var socket = io.connect('http://localhost:3000'); // 根据实际情况修改服务器地址和端口号
this.on = function(eventName, callback) {
socket.on(eventName, function() {
var args = arguments;
callback.apply(socket, args);
});
};
this.emit = function(eventName, data, callback) {
socket.emit(eventName, data, function() {
var args = arguments;
if (callback) {
callback.apply(socket, args);
}
});
};
});这个服务封装了 socket.io 的 on 和 emit 方法，可以通过注入该服务到控制器中，方便在不同控制器之间实现事件的共享：
// javascriptcn.com 代码示例
app.controller('MyController1', function($scope, socketService) {
socketService.on('news', function(data) {
$scope.$apply(function() {
$scope.news1 = data;
});
});
});
app.controller('MyController2', function($scope, socketService) {
socketService.on('news', function(data) {
$scope.$apply(function() {
$scope.news2 = data;
});
});
});
app.controller('MyController3', function($scope, socketService) {
$scope.send = function() {
socketService.emit('my-event', { msg: $scope.msg }, function(data) {
console.log(data);
});
};
});上述代码中，我们定义了 three 个控制器。其中 MyController1 和 MyController2 监听 "news" 事件，当收到服务器的消息时，更新绑定了该控制器的视图。MyController3 则可以通过 emit 发送 "my-event" 事件，并传递一个数据对象，同时还可以提供一个回调函数，在收到服务器的响应时执行该函数。
总结
socket.io 是一款强大、灵活的实时通信库，而 angular.js 则是一款优秀的前端框架。将它们搭配起来可以实现复杂的实时应用，例如聊天室、协同编辑等。本教程介绍了 socket.io 和 angular.js 的基本使用方法，希望对你的开发实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528d5a27d4982a6ebb62ab0