websocket | 浅浅的封装一下

154 阅读2分钟

在写websocket的时候,很多页面都需要使用,每个页面重复写,太麻烦,于是先浅浅的封装一下。

起一个websocket后台

  • 为了方面页面调试,我先简单的建一个nodejswebsocket后台服务,定时给发送消息。
// 引入nodejs-websocket
const ws = require("nodejs-websocket");
// 定义监听的host地址跟port端口
const host = "127.0.0.1",
  port = 8888;
// 创建ws服务
ws.createServer((conn) => {
  // 定义测试数据
  const data = ["消息1", "消息2", "消息3"];
  setInterval(() => {
    // 随机推送message里的内容
    conn.sendText(data[(Math.random() * 2).toFixed(0)]);
    console.log("推送成功!");
  }, 2000);
}).listen(port, host, () => {
  console.log(`服务打开成功:${host}:${port}`);
});

运行文件,会打印地址127.0.0.1:8888,在使用的时候就使用该地址。

使用函数封装

interface ScoketOptions {
  url: string
  token?: string[]
  message?: any
}
/**
 * 函数的形式封装
 * @param option  {url: string ,  token?: string[] ,  message?: any}
 * @returns
 */
export const useScoket = (
  option: ScoketOptions = {
    url: "",
    token: [],
    message: ""
  }
) => {
  let ws: WebSocket

  //   创建链接
  const connect = () => {
    close()
    ws = new WebSocket(option.url, option.token)
    error()
    open()
  }

  //   打开链接
  const open = () => {
    ws.onopen = () => {
      console.log("WebSocket open")
      ws.send("hello")
    }
  }

  //   接收消息
  const onMessage = (callback: (...data: any[]) => any): void => {
    if (ws) {
      ws.onmessage = (e: any) => {
        console.log("接收消息", e)
        try {
          const res = JSON.parse(e.data)
          callback(res)
        } catch (err) {
          callback(e)
        }
      }
    }
  }

  //   关闭通信
  const close = () => {
    if (ws) {
      ws.close()
      ws.onclose = (e: any) => {
        console.log(e)
      }
    }
  }

  //   发送消息
  const send = () => {
    if (ws) {
      ws.send(option.message)
    }
  }

  //   错误重连
  const error = () => {
    if (ws) {
      ws.onerror = (err) => {
        connect()
      }
    }
  }

  connect()

  return {
    onMessage,
    close,
    send
  }
}

使用class封装

interface ScoketOptions {
  url: string
  token?: string[]
  message?: any
}
/**
 * class的形式封装
 * @param option  {url: string ,  token?: string[] ,  message?: any}
 */
export class useScoket {
  private url: string = ""
  private token?: string[] = []
  private message?: string = ""
  private ws: WebSocket | null = null
  constructor(option: ScoketOptions) {
    this.url = option.url
    this.token = option.token
    this.message = option.message
    this.connect()
  }

  //   创建链接
  connect = () => {
    this.close()
    this.ws = new WebSocket(this.url, this.token)
    this.error()
    this.open()
  }

  //   打开链接
  open = () => {
    this.ws!.onopen = () => {
      console.log("WebSocket open")
      this.ws!.send("hello")
    }
  }

  //   接收消息
  onMessage = (callback: (...data: any[]) => any): void => {
    if (this.ws) {
      this.ws.onmessage = (e: any) => {
        console.log("接收消息", e)
        try {
          const res = JSON.parse(e.data)
          callback(res)
        } catch (err) {
          callback(e)
        }
      }
    }
  }

  //   关闭通信
  close = () => {
    if (this.ws) {
      this.ws.close()
      this.ws.onclose = (e: any) => {
        console.log(e)
      }
    }
  }

  //   发送消息
  send = () => {
    if (this.ws) {
      this.ws.send(this.message!)
    }
  }

  //   错误重连
  error = () => {
    if (this.ws) {
      this.ws.onerror = (err) => {
        this.connect()
      }
    }
  }
}

使用

函数方式

const ws = useScoket({ url: "ws://127.0.0.1:8888" })
ws.onMessage((data: any) => {
  console.log("message", data)
})

class方式

const ws = new useScoket({ url: "ws://127.0.0.1:8888" })
ws.onMessage((data: any) => {
  console.log("message", data)
})

本文由mdnice多平台发布