溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
