【前端插件】简单封装WebSocket
来源:互联网 发布:vue.js是谁开发的 编辑:程序博客网 时间:2024/06/05 19:54
修改记录
正文
JS
/**WebSocket插件 * * @CreateBy:chngzhen@outlook.com * @CreateOn:2017-07-06 * @UpdateBy:chngzhen@outlook.com * @UpdateOn:2017-11-27 * * @param json * @returns {{init: init}} * @constructor */var IWebSocket = function(json) { let options = { uri:"#", // Socket绑定的URI sockJsUri:"#", projectName: window.location.pathname.split("/")[1], // 项目名称。默认以“/”为分隔符切割URI后取第2个字符串 host: window.location.host, // 项目IP和端口。默认取当前项目的主机IP和Port onOpen:function(event) { // 自定义WSC连接事件:服务端与前端连接成功后触发 console.log(event) }, onMessage:function(event) { // 自定义WSC消息接收事件:服务端向前端发送消息时触发 console.log(event) }, onError:function(event) { // 自定义WSC异常事件:WSC报错后触发 console.log(event) }, onClose:function(event) { // 自定义WSC关闭事件:WSC关闭后触发 console.log(event) } }; $.extend(true, options, json); let websocket; if ('WebSocket' in window) { websocket = new WebSocket("ws://" + options.host + "/" +options.projectName + "/" + options.uri); } else if ('MozWebSocket' in window) { websocket = new MozWebSocket("ws://" + options.host + "/" +options.projectName + "/" + options.uri); } else { websocket = new SockJS("http://" + options.host + "/" +options.projectName + "/" + options.sockJsUri); } websocket.onopen = function(evnt) { options.onOpen(evnt); }; websocket.onmessage = function(evnt) { options.onMessage(evnt); }; websocket.onerror = function(evnt) { options.onError(evnt); }; websocket.onclose = function(evnt) { options.onClose(evnt); }; return websocket;}
使用
本文章不展示后台程序。
var system = IWebSocket({ uri:"/wsc/count/readtimes?blogId=${blog.id}" // 可以自定义四大事件 ,onOpen: function(event) { console.log("阅读时长统计WebSocket开启!"); websockets.countReadTimes.timeout=setTimeout("plusReadTimes()", 60000); } ,onClose: function(event){ console.log("阅读时长统计WebSocket关闭!"); if ("undefined"!=typeof websockets.countReadTimes.timeout) clearTimeout(websockets.countReadTimes.timeout); },onMessage: function(event) { console.log(event.toString()) }});
阅读全文
2 0
- 【前端插件】简单封装WebSocket
- 封装简单iframe插件
- WebSocket 封装
- js封装-简单雪花插件
- 封装jquery插件很简单
- 自己封装的简单Jquery分页插件
- 简单封装微信分享插件
- HTML5 WebSocket 封装
- WebSocket 接口封装方法
- jquery的websocket插件
- jquery的websocket插件
- websocket---前端的实现(一)
- 前端插件
- 前端插件
- 前端插件
- 前端插件
- 如何封装一个最简单的jquery插件
- 封装一个简单的banner轮播插件
- 为什么需要auto_ptr_ref
- 这些企业倒闭了?别不信,看数据可视化分析系统还原真相
- Python
- 利用原始socket简单实现FTP的客户端和服务器端程序
- vs2012中多行注释快捷键
- 【前端插件】简单封装WebSocket
- MySQL Memory 存储引擎浅析
- DataSet对象获取相应列值、行列数、列名、取出特定值这些操作的总结
- 应对节日高峰-Web架构实践
- 百度AI开发者大会背后的故事
- vue引入图片问题
- POI读取Excel数据日期时间输出
- 谈谈WebView的使用【从零开始搭建android框架系列(5)】
- 启动eclipse(64位)后,获取java进程发现时生成了一个32位的进程