Angularjs 中的 Socket.io
[英]Socket.io in Angularjs
問題描述
我將使用 socket.io 在我的 Angular/nodejs 應用程序中添加一些 websockets 功能。
最終目的是在服務器上保留一個不可用於編寫文檔的“實時”數組（因為其他人正在編輯它們） 。 但是我從 socket.io 聊天示例開始，很快就卡住了。 我確定我在這里遺漏了一些微不足道的東西。 $scope.sendMessage()不發出任何東西..
前部
html
<input type="text" class="form-control" placeholder="message" name="message" ng-model="message"> <button type="button" ng-click="sendMessage()"> sendMessage </button>
socket.io 被包裝在一個服務中
app.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});
控制器
$scope.messages=[]
socket.on('init', function (data) {
});
socket.on('send:message', function (message) {
console.log("send:message")
$scope.messages.push(message);
});
$scope.sendMessage = function () {
console.log("send:message")
socket.emit('send:message',$scope.message);
$scope.messages.push($scope.message);
};
服務器
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io')(server);
io.on('connection', function (socket) {
console.log('a user connected');
socket.on('disconnect', function () {
console.log('user disconnected');
});
socket.on('send:message', function (message) {
console.log('send:message:'+message);
socket.broadcast.emit('send:message', {
text:message
});
});
});
2 個解決方案
解決方案1
1 2020-04-06 15:32:15
我使用這個堆棧創建了一個小應用程序。 在這里查看我的項目。 我在為 AngularJs 制作的 socket-io 周圍使用了這個包裝器，發現它非常易於使用！
本質上，在我的項目中，我有以下內容：
NodeJs 服務器代碼（入口點）：
class Server {
constructor() {
this.express = require('express');
this.redis = require('redis');
this.client = this.redis.createClient(); //creates a new client
this.app = this.express();
this.server = require('http').Server(this.app);
this.io = require('socket.io').listen(this.server);
this.app.use('/node_modules', this.express.static(__dirname + '/node_modules'));
this.app.use('/static', this.express.static(__dirname + '/static'));
this.app.get('/', (req, res) => {
res.sendFile(__dirname+'/index.html');
});
this.server.listen(8081, '0.0.0.0', () => { // Listens to port 80
console.log('Listening on ' + this.server.address().port);
});
this.setup();
}
setup() {
this.io.on("connection", (socket) => {
this.socket = socket;
this.centralServer();
});
}
...
...
}
然后，在index.html ，我為所需的庫加載了 JS：
<html lang="en">
<head>
...
...
<script src="/node_modules/socket.io-client/dist/socket.io.js" type="text/javascript"></script>
<script src="/node_modules/redis/index.js" type="text/javascript"></script>
<script src="/node_modules/angular-socket-io/socket.min.js" type="text/javascript"></script>
<script src="/static/js/main.js" type="text/javascript"></script>
...
...
</head>
<body ng-app="app">
<div ng-include='"static/views/<mainDOM>.html"'></div>
</body>
最后，在我的 Angular 應用程序中，我有以下內容：
var app = angular.module("app", ['btford.socket-io']);
app.controller('myGame', ['$scope', 'socketFactory', function($scope, socketFactory) {
class Player {
constructor() {
this.dom = $scope;
this.dom.Room = {};
this.socket = socketFactory();
this.dom.roomExists = false;
this.setup();
}
...
...
}
$scope.player = new Player();
}
我認為我在這個項目中做得很好，提供了一個 AngularJS + Socket-io 的最小示例。
解決方案2
0 2016-10-24 13:50:44
這確實是你為自己創造的一個復雜問題。 我會通過創建一個后端服務（通過 http）來管理鎖定。
當用戶要求編輯文檔時，他們被授予鎖定，並且可以進入編輯頁面。 當他們保存它時，鎖被釋放。 如果另一個用戶要求編輯，狀態返回告訴他們它被鎖定，並顯示一個錯誤對話框。
如果用戶關閉瀏覽器或忘記保存，您可能需要在鎖定上設置某種超時。 通過套接字連接管理這個將需要大量工作，並且難以調試。 將所有內容保持為簡單的 http 請求會容易得多。
Angularjs socket.io服務
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.