有人能介绍一下angular中websocket吗
发布网友
发布时间：2022-05-08 10:19
共2个回答
懂视网
时间：2022-05-14 21:31
对于开始接触websocket的人来说，实在是太难了。而且一路上的坑还不少。
网上有很多关于websocket的文章和插件，老码找了很多之后还是觉得这个插件不错，对于使用angularjs开发的朋友，我很推荐这个
angular websocket.js
这个有比较全的开发文档和使用指导，可以实现socket意外中断自动恢复连接等功能。
下面是我的项目中使用的websocket，
先在项目中引进websocket.js文件，app中添加模块引用
angular.module('app', [“ngWebSocket”])
请求地址使用的是自动适配的，主要解决开发环境和服务器切换之后的更改麻烦，或者更改域名之后适用
angular.module('app').factory('socketData', function ($websocket, $location) {
var host = $location.host();
if ($location.port() && $location.port() != 80 && $location.port() != 443) {
host = host + ':' + $location.port();
}
var ws = "ws";
if ($location.protocol() == 'https') {
ws = "wss";
}
// 开始连接
var dataStream = $websocket(ws + '://' + host + '/Api/App');
dataStream.reconnectIfNotNormalClose = true;
var collection = [];
var methods = {
lastestdata: {},
readyState: 0,
collection: collection,
sendData: function (data) {
dataStream.send(JSON.stringify(data));
}
};
dataStream.onMessage(function (message) {
methods.readyState = dataStream.readyState;
methods.lastestdata = JSON.parse(message.data);
collection.push(JSON.parse(message.data));
//这里可以直接跳转到制定的页面，我这里是跳转到了我的地图页面
//window.location = '/#/app/Map/Index'
});
dataStream.onError(function (message) {
//监控状态变化，实时跟进连接状态
methods.readyState = dataStream.readyState;
});
dataStream.onOpen(function (message) {
methods.readyState = dataStream.readyState;
});
dataStream.onClose(function (message) {
methods.readyState = dataStream.readyState;
});
return methods;
})
使用的时候也很简单，直接在controller中加入这个
app.controller('mapctrl', function ($scope, $timeout, $interval, $state, $location, $window, $http, $compile, socketData) {
$scope.socketData = socketData;
//可以监控这个变量的变化实时处理对应的操作
})好了websocket使用，客户端的就差不多这样了
接下来老码给大家分享.net环境下服务器端的websocket使用。
其中分为，消息分发中心和后台消息变化触发的socket广播事件。
热心网友
时间：2022-05-14 18:39
1. WebSocket API简介
首先看一段简单的javascript代码，该代码调用了WebSockets的API。
[javascript] view plaincopy
var ws = new WebSocket(“ws://echo.websocket.org”);
ws.onopen = function(){ws.send(“Test!”); };
ws.onmessage = function(evt){console.log(evt.data);ws.close();};
ws.onclose = function(evt){console.log(“WebSocketClosed!”);};
ws.onerror = function(evt){console.log(“WebSocketError!”);};
这份代码总共只有5行，现在简单概述一下这5行代码的意义。
第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。
