ws-json-wrapper

说明: 一、传输的消息体格式:

Usage no npm install needed!

<script type="module">
  import wsJsonWrapper from 'https://cdn.skypack.dev/ws-json-wrapper';
</script>

README

wsjson 函数执行后生成一个websocket实例,集成了心跳检测、断线重连和事件的功能。


说明:

一、传输的消息体格式:

约定前后端传输格式如下

{
    type:xxx
    data:{
        ...
    }
}

默认配置下会在发送时进行JSON序列化,收到消息时进行JSON反序列化

二、检测服务端断线的心跳检测功能

默认配置下,服务端会定时发出

{
    type:'PING'
}

要求服务端在接收到消息后返回

{
    type:'PONG',
    ...
}

要求后端代码中判断,如果客户端发送的消息体的type是'PING',就返回type为'PONG'的消息体


使用方法:

一、创建连接

const ws = webSocket(url) // 使用默认配置  
const ws = webSocket(url,options) // 传入参数 

interface options{ 


}

二、发送消息

// 使用send方法
ws.send({type:1,data:{msg:'hello'}})

三、接收消息

用法一:同原生websocketAPI

ws.onmessage=function(e){
    ...
}
ws.onerror=function(e){
    ...
}

用法二:使用事件

ws.on(type,cb) 第一个参数是type字段的内容,第二个回调接收了data的内容

ws.on(/* type */,(data)=>{

})

ws.on('NEW_MESSAGE',(data)=>{

})

ws.on('PULL_MESSAGE',(data)=>{

})

用法三:监听实例内部latestState字段获取状态

$store.state.wsState = ws.latestState  // 例如 在Vue中,可以作为一个可监听的全局响应式数据
...
watch:{
    'wsState':(n,o){
        if(n){
            const {type,data} = n
            if(type === "NEW_MESSAGE"){
                ...
            }
        }
    }
}