您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

angular如何使用websocket的方法介绍

2024/3/3 8:06:26发布18次查看
这篇文章给大家介绍的文章内容是关于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广播事件。
相关推荐:
javascript学习中常会遇到的js事件处理程序
如何基于webpack4搭建一个react脚手架的过程分析
以上就是angular如何使用websocket的方法介绍的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product