websocket | 浅浅的封装一下

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


在写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)
})


相关文章
websocket封装带心跳和重连机制(vue3+ts+vite)
websocket封装带心跳和重连机制(vue3+ts+vite)
1563 0
|
5月前
|
前端开发
告别屎山!!!WebSocket 的极致封装, 写好代码竟如此简单
告别屎山!!!WebSocket 的极致封装, 写好代码竟如此简单
80 0
|
10月前
|
JavaScript
vue websocket组件封装
vue websocket组件封装
200 0
|
开发框架 前端开发 网络协议
服务器开发- Asp.Net Core中的websocket,并封装一个简单的中间件
服务器开发- Asp.Net Core中的websocket,并封装一个简单的中间件
424 1
|
网络协议 前端开发 安全
websocket和http的瓜葛以及websocket协议实现
websocket和http的瓜葛以及websocket协议实现
websocket和http的瓜葛以及websocket协议实现
|
JavaScript
js实现websocket实例
js实现websocket实例
197 0
|
消息中间件 网络协议 前端开发
SpringBoot轻松整合WebSocket,实现Web在线聊天室
前面为大家讲述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各种框架组件;随着移动互联网的发展,服务端消息数据推送已经是一个非常重要、非常普遍的基础功能。今天就和大家聊聊在SpringBoot轻松整合WebSocket,实现Web在线聊天室,希望能对大家有所帮助。
SpringBoot轻松整合WebSocket,实现Web在线聊天室
|
网络协议 Linux 网络安全
php实现websocket实时消息推送
php实现websocket实时消息推送
433 0
php实现websocket实时消息推送
|
JavaScript 前端开发 Python
Python编程:tornado实现WebSocket通讯
以下实例有点像广播通讯,支持多个客户端连接 代码参考别人的,稍微做了一点点修改 服务器端 websocket_demo.py
98 0
Python编程:tornado实现WebSocket通讯
|
消息中间件 NoSQL 前端开发
通过WebSocket实现日志打印功能
通过WebSocket实现日志打印功能
687 0
通过WebSocket实现日志打印功能