AngularJS 是一款用于构建单页应用程序（SPA）的 JavaScript 框架，而 WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。将 AngularJS 与 WebSocket 集成，可以实现实时数据交互，提高应用程序的性能和用户体验。
下面是一个简单的 AngularJS 与 WebSocket 集成的实战示例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
</head>
<body ng-controller="myController">
<!-- 在这里添加你的 HTML 内容 -->
<script src="app.js"></script>
</body>
</html>
app.js 的 JavaScript 文件，并在其中定义 AngularJS 模块和控制器：const app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
// 在这里添加你的控制器逻辑
}]);
socket.io 为例：const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('客户端已连接');
// 监听客户端发送的消息
socket.on('message', (data) => {
console.log('收到客户端消息:', data);
// 向所有客户端发送消息
io.emit('message', '服务器已收到消息: ' + data);
});
// 监听客户端断开连接
socket.on('disconnect', () => {
console.log('客户端已断开连接');
});
});
server.listen(3000, () => {
console.log('WebSocket 服务器正在监听端口 3000');
});
$scope 对象创建一个名为 message 的变量，用于存储从 WebSocket 服务器接收到的消息。然后，使用 socket.io 库创建一个名为 socket 的对象，并将其与服务器进行连接：app.controller('myController', ['$scope', function($scope) {
$scope.message = '';
const socket = io('http://localhost:3000');
// 监听服务器发送的消息
socket.on('message', (data) => {
$scope.$apply(() => {
$scope.message = data;
});
});
// 向服务器发送消息
$scope.sendMessage = () => {
socket.emit('message', $scope.message);
$scope.message = '';
};
}]);
ng-bind 指令，用于显示从服务器接收到的消息：<body ng-controller="myController">
<h1>AngularJS 与 WebSocket 集成实战</h1>
<input type="text" ng-model="message" placeholder="请输入消息">
<button ng-click="sendMessage()">发送</button>
<p ng-bind="message"></p>
</body>
现在，当你在输入框中输入消息并点击发送按钮时，客户端会通过 WebSocket 服务器将消息发送给服务器。服务器收到消息后，会将其广播给所有连接的客户端，从而实现实时数据交互。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
