gpt4 book ai didi

AngularJS 不使用 socket.io 刷新 View

转载 作者:太空宇宙 更新时间:2023-11-03 23:05:17 27 4
gpt4 key购买 nike

我有一个具有以下设置的 Node.js 服务器应用程序:

    var express = require('express');
var io = require('socket.io');
var http = require('http');
var app = express();

app.use(express.static('public'));

var server = http.createServer(app);
io = io.listen(server);

io.on('connection', function(socket){
console.log('a user is connected');
});

device.on('disconnect', function() {
console.log('we got disconnected! :( ');
io.emit('deviceDisconnection');
});

此处的设备是蓝牙连接设备。并且,在客户端,我有一个 AngularJS 应用程序,在应用程序的 Controller 中声明了以下事件订阅:

var appFront = angular.module(appFront , [])
.controller('mainController', ['$scope', '$http', function($scope,$http) {
var socket = io();
socket.on('deviceDisconnection', function(){
$scope.connected = 'TRUE';
});
}]);

当然,在 View 中,我有以下绑定(bind):

<div class="row">
<p>{{connected}}</p>
</div>

问题是这种变化并不是真正的“实时”。我的意思是,connected 值可能在范围内发生更改,但需要在页面(按钮 clic)上执行操作以使 View 更新为正确的值。如果我没有在页面上执行任何操作,则该值不会刷新。

我可能忘记了一些东西..但我不知道是什么..

最佳答案

Socket.io 事件是 AngularJS 的外部事件,因此您需要警告 AngularJS 刚刚发生了更改:

var appFront = angular.module(appFront , [])
.controller('mainController', ['$scope', '$http', function($scope,$http) {
var socket = io();
socket.on('deviceDisconnection', function(){
$scope.$applyAsync(function () {
$scope.connected = 'TRUE';
});
});
}]);

现在这可能非常麻烦,因此您可以创建一个工厂来为您处理

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);
}
});
})
}
};
});

您可以在here中查看有关该代码片段的更多信息。 ,版权归作者布莱恩·福特所有。

编辑

maurycy说过了,由于 Angular 1.3 更好地使用 $applyAsync,并且由于上面的代码片段是在 2012 年编写的,所以有点过时了,所以更好的版本应该是这样的

app.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$applyAsync(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$applyAsync(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});

关于AngularJS 不使用 socket.io 刷新 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36088397/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com