视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
angular如何使用websocket的方法介绍
2020-11-27 19:33:08 责编:小采
文档


这篇文章给大家介绍的文章内容是关于angular如何使用websocket的方法介绍,有很好的参考价值,希望可以帮助到有需要的朋友。

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

下载本文
显示全文
专题