angular使用 websocket,少点套路,多一点真诚

2018-07-27 06:58:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

对于开始接触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广播事件。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:获取指定时间的Date对象,IE和Chrome的区别(兼容IE)

下一篇:网站性能优化-转载