jq封装websocket插件,实现聊天室重连机制、心跳机制

此jq封装方法来自于这里代码简单易懂,如下://jqwebsocket.js//==========websocket(function($) { $.websocket = function(options) { var defaults = { domain: top.location.hostname, port...
摘要由CSDN通过智能技术生成

此jq封装方法来自于这里

代码简单易懂,如下:
//jqwebsocket.js
//==========websocket
(function($) {
    $.websocket = function(options) {
        var defaults = {
            domain: top.location.hostname,
            port:3398,
            protocol:""
        };
        var opts = $.extend(defaults,options);
        var szServer = "ws://" + opts.domain + ":" + opts.port + "/" + opts.protocol;
        var socket = null;
        var bOpen = false;
        var t1 = 0; 
        var t2 = 0; 
        var messageevent = {
            onInit:function(){
                if(!("WebSocket" in window) && !("MozWebSocket" in window)){  
                    return false;
                }
                if(("MozWebSocket" in window)){
                    socket = new MozWebSocket(szServer);  
                }else{
                    socket = new WebSocket(szServer);
                }
                if(opts.onInit){
                    opts.onInit();
                }
            },
            onOpen:function(event){
                bOpen = true;
                if(opts.onOpen){
                    opts.onOpen(event);
                }
            },
            onSend:function(msg){
                t1 = new Date().getTime(); 
                if(opts.onSend){
                    opts.onSend(msg);
                }
                socket.send(msg);
            },
            onMessage:function(msg){
                t2 = new Date().getTime(); 
                if(opts.onMessage){
                    opts.onMessage(msg.data,t2 - t1);
                }
            },
            onError:function(event){
                if(opts.onError){
                    opts.onError(event);
                }
            },
            onClose:function(event){
                if(opts.onclose){
                    opts.onclose(event);
           
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的 JavaScript WebSocket 封装代码,它包含心跳重连机制: ```javascript class WebSocketClient { constructor(url, options = {}) { this.url = url; this.options = options; this.reconnectInterval = options.reconnectInterval || 1000; this.heartbeatInterval = options.heartbeatInterval || 5000; this.onopen = options.onopen || function() {}; this.onmessage = options.onmessage || function() {}; this.onclose = options.onclose || function() {}; this.onerror = options.onerror || function() {}; this.connect(); } connect() { this.socket = new WebSocket(this.url); this.socket.onopen = () => { console.log('WebSocket connected'); this.onopen(); this.startHeartbeat(); }; this.socket.onmessage = (event) => { console.log(`WebSocket message received: ${event.data}`); this.onmessage(event); }; this.socket.onclose = (event) => { console.log(`WebSocket closed with code ${event.code}`); this.onclose(event); setTimeout(() => { console.log('WebSocket reconnecting...'); this.connect(); }, this.reconnectInterval); }; this.socket.onerror = (error) => { console.error(`WebSocket error: ${error.message}`); this.onerror(error); }; } send(data) { this.socket.send(data); } startHeartbeat() { this.heartbeatTimer = setInterval(() => { if (this.socket.readyState === WebSocket.OPEN) { this.send('ping'); } }, this.heartbeatInterval); } stopHeartbeat() { clearInterval(this.heartbeatTimer); } close() { this.stopHeartbeat(); this.socket.close(); } } ``` 使用方法如下: ```javascript const ws = new WebSocketClient('ws://localhost:8080', { onopen: () => { console.log('WebSocket opened'); }, onmessage: (event) => { if (event.data === 'ping') { console.log('WebSocket heartbeat received'); } else { console.log(`WebSocket message received: ${event.data}`); } }, onclose: () => { console.log('WebSocket closed'); }, onerror: (error) => { console.error(`WebSocket error: ${error.message}`); }, reconnectInterval: 1000, heartbeatInterval: 5000, }); // 发送消息 ws.send('hello'); // 关闭连接 ws.close(); ``` 该代码在创建 `WebSocketClient` 对象时会自动连接 WebSocket,并启动心跳检测。当 WebSocket 断开连接时,会自动重连。可以通过调用 `send` 方法发送消息,通过调用 `close` 方法关闭连接。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值