websocket demo，websocket封装，jquery下的websocket封装

一、websocket封装github地址：https://github.com/yquanmei/websocket-demo。
二、需求
最近公司要求加入websocket的页面有点多，每次都重复写websocket代码太累，所以就简单封装一下。

三、websocket.js
1、需要的参数：
（1）websocket链接每次都需要外部传入，公司链接是ip+url组成，所以就分成了2个部分。
（2）点击某个按钮后，需要断开websocket，所以就是否断开的参数。
（3）onopen、onmessage时的信息交流，需要发送消息，和接收消息，或进行其他操作，所以有对应的3个方法。
（4）因为有时候websocket断了，但是没有进行信息的联通，浏览器端不知道断了，就需要进行心跳检测。如果不需要心跳检测，也可以传入参数heartBeat： false

/** @params {boolean} cancelSocket:是否断开websocket，默认false* @params {str} socketIp: websocket的ip，默认后台调取* @params {str} wsUrl: websocket的链接，无默认值* @params {str} sockUrl: 不支持websocket时的链接，无默认值* @params {func} openSendMsg： 打开websocket的onopen时执行的方法* @params {func} sendMsg: 连接上后，onmessage中发送消息的方法，无默认值* @params {func} receiveMsg: 连接上后，onmessage中接收到消息的方法，无默认值* @params {boolean} heartBeat:是否打开心跳检测，默认true* @params {num} timeout: 心跳检测的间隔时间，默认10分钟*/

2、主要方法：initEventHandle中的onopen、onmessage、onclose、onerror方法，具体操作由外部传入

ws.onclose = function () {if (getConnect == 1) {originThis.reconnect(wsUrl, sockUrl);console.log('close():断开');}};ws.onerror = function () {if (getConnect == 1) {originThis.reconnect(wsUrl, sockUrl);console.log('error()：报错');}};ws.onopen = function () {if (originThis.opts.heartBeat) {heartCheckObj.reset().start(); // 心跳检测重置}if (ws.readyState == 1) {var msg = originThis.opts.openSendMsg();if (!msg) {var openTimeSpe = curTime();console.log('onopen()：连接成功，' + openTimeSpe);msg = '打开时间:' + openTimeSpe;}ws.send(msg);// ws.send('打开时间:' + openTimeSpe);}};ws.onmessage = function (event) {if (originThis.opts.heartBeat) {heartCheckObj.reset().start(); // 拿到任何消息都说明当前连接是正常的}originThis.opts.sendMsg && originThis.opts.sendMsg(ws); // 发送消息originThis.opts.receiveMsg && originThis.opts.receiveMsg(event); //接收消息}

四、websocket.html
1、echo.websocket.org/可以用来测试，只要发送消息，这个网站就会返回发送过去的消息。

  $.newSocket({socketIp: 'echo.websocket.org/',wsUrl: '',sockUrl: null,openSendMsg: openSendMsg,sendMsg: sendMsg,receiveMsg: receiveMsg,timeout: 10000});

2、如果是取消连接，则直接传入cancelSocket：false就行

 $.newSocket({cancelSocket: true});

四、代码：https://github.com/yquanmei/websocket-demo

websocket demo，websocket封装，jquery下的websocket封装相关推荐

Springboot下使用WebSocket和浏览器进行长连接通信
WebSocket是Html5里面的一个东西. WebSocket有别于从前的Http协议,http是无状态的.请求了一次服务器,下一次请求连自己都不知道自己上一次请求了什么内容, 然而,webSoc ...
使用tomcat8下的websocket进行web前后端通信
2019独角兽企业重金招聘Python工程师标准>>> 软件版本:tomcat8,tomcat8的lib下的websocket-api 学习文件:example下的websocket ...
vue封装websocket_Vue中使用websocket
websocket demo export default { data() { return { websock: null, } }, created(){ //页面刚进入时开启长连接 this. ...
springboot框架下利用websocket实现即时通讯
springboot框架下利用websocket实现即时通讯(文章末尾有git项目打包文件,直接下载使用即可) 用websocket实现简单的在线聊天,先画个时序图,直观感受下流程 SystemCon ...
kestrel web服务器性能对比,Asp.Net Core 3.0 Kestrel服务器下高性能 WebSocket Server
最近研究.net core 的各种高性能类型,内存池之类的东西,基于kestrel 服务器的websocket ,写个例子练下手把原生的Websocket用ArrayPool,Memory改造了下, ...
JS逆向：【硬干货】手把手实战某条_signature参数破解（下）——WebSocket与JS函数
本文仅供学习交流使用,请勿用于商业用途或不正当行为如果侵犯到贵公司的隐私或权益,请联系我立即删除前两篇文章: js逆向:[硬干货]手把手实战某条_signature参数破解(上) js逆向:[硬干 ...
网站升级Https后之前在http下的WebSocket出现链接失败的问题
网站升级Https后之前在http下的WebSocket出现链接失败的问题一.前端代码 var socket = new WebSocket('ws://192.168.2.110') 注意点: 1 ...
【Unity】在Unity下使用websocket的一些经验
首先,先上大家都知道的简介,这一版是我认为比较清晰的...虽然在度娘的教导和知乎的教导下,总算认识了websocket,但这个过程比较艰辛,给大家发出来看一下: ------------------- ...
websocket 学习--简单使用，nodejs搭建websocket服务器，到模拟股票，到实现聊天室
websocket简介: WebSocket协议是 HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议.它允许服务器主动发送信息给客户端. 和http协议的不同?? HTTP 协议 ...

websocket demo，websocket封装，jquery下的websocket封装

websocket demo，websocket封装，jquery下的websocket封装相关推荐

最新文章

热门文章