js封裝一個websocket

原文：https://www.jianshu.com/p/938004c22ed9

創建websocket.js

let Socket = ''
let setIntervalWesocketPush = null
/**

    
    
    
            
 
             
建立websocket連接
 
             
@param {string} url ws地址
 */
 export const createSocket = url => {
 Socket && Socket.close()
 if (!Socket) {
 console.log('建立websocket連接')
 Socket = new WebSocket(url)
 Socket.onopen = onopenWS
 Socket.onmessage = onmessageWS
 Socket.onerror = onerrorWS
 Socket.onclose = oncloseWS
 } else {
 console.log('websocket已連接')
 }
 }
 
            
/**打開WS之后發送心跳 */
 const onopenWS = () => {
 sendPing()
 }
/**連接失敗重連 */
 const onerrorWS = () => {
 Socket.close()
 clearInterval(setIntervalWesocketPush)
 console.log('連接失敗重連中')
 if (Socket.readyState !== 3) {
 Socket = null
 createSocket()
 }
 }
/**WS數據接收統一處理 */
 const onmessageWS = e => {
 window.dispatchEvent(new CustomEvent('onmessageWS', {
 detail: {
 data: e.data
 }
 }))
 }
/**

    
    
    
            
 
             
發送數據但連接未建立時進行處理等待重發
 
             
@param {any} message 需要發送的數據
 */
 const connecting = message => {
 setTimeout(() => {
 if (Socket.readyState === 0) {
 connecting(message)
 } else {
 Socket.send(JSON.stringify(message))
 }
 }, 1000)
 }
 
            
/**

    
    
    
            
 
             
發送數據
 
             
@param {any} message 需要發送的數據
 */
 export const sendWSPush = message => {
 if (Socket ! null && Socket.readyState = 3) {
 Socket.close()
 createSocket()
 } else if (Socket.readyState = 1) {
 Socket.send(JSON.stringify(message))
 } else if (Socket.readyState = 0) {
 connecting(message)
 }
 }
 
            
/斷開重連 */
 const oncloseWS = () => {
 clearInterval(setIntervalWesocketPush)
 console.log('websocket已斷開....正在嘗試重連')
 if (Socket.readyState !== 2) {
 Socket = null
 createSocket()
 }
 }
 /發送心跳

    
    
    
            
 
             
@param {number} time 心跳間隔毫秒 默認5000
 
             
@param {string} ping 心跳名稱 默認字符串ping
 */
 export const sendPing = (time = 5000, ping = 'ping') => {
 clearInterval(setIntervalWesocketPush)
 Socket.send(ping)
 setIntervalWesocketPush = setInterval(() => {
 Socket.send(ping)
 }, time)
 }
 
            

下載 (也可復制源碼，放在本地，使用方式相同)

npm install @sven0706/websocket -S

使用

// 在main.js或需要使用的地方引入並建立連接
import { createSocket } from '@sven0706/websocket'
createSocket('wss://api.baidu.com')
// 發送消息
 import { sendWSPush } from '@sven0706/websocket'
 sendWSPush(data)
// 接收消息
 const getsocketData = e => { // 創建接收消息函數
 const data = e && e.detail.data
 console.log(data)
 }
 // 注冊監聽事件
 window.addEventListener('onmessageWS', getsocketData)
// 在需要的時候卸載監聽事件，比如離開頁面
 window.removeEventListener('onmessageWS', getsocketData)

API

僅三個api, 且一般只需要用到`createSocket`, `sendWSPush`
/**

    
    
    
            
 
             
建立websocket連接
 
             
@param {string} url ws地址
 */
 createSocket(url)
 
            
/**

    
    
    
            
 
             
發送數據
 
             
@param {any} message 需要發送的數據
 */
 sendWSPush(message)
 
            
/**發送心跳

   
   
   
           

    
    
    
             
@param {number} time 心跳間隔毫秒 默認5000
 
    
    
    
            
@param {string} ping 心跳名稱 默認字符串ping
 */
 sendPing()