Vue3+WebSocket 实时聊天框架

WebSocket前端搭建

封装WebSocket基本框架。必备监听器值open、close、error、message。在页面调用封装好的WebSocket。

值	作用
open	连接websocket时触发
close	关闭websocke时触发
error	发生错误时触发
message	接收消息时触发

封装WebSocket代码实例：

function useWebSocket(handleMessage){
   //连接ws服务器的地址
   const ws = new WebSocket('ws://localhost:3000')

   const init = () =>{
      bindEvent()
   }

   function bindEvent(){
      //监听
      ws.addEventListener('open',handleOpen, false)
      ws.addEventListener('close',handleClose, false)
      ws.addEventListener('error',handleError, false)
      ws.addEventListener('message',handleMessage, false)
   }

   function handleOpen(e){
      console.log('WebSocket open',e)
   }
   function handleClose(e){
      console.log('WebSocket close',e)
   }
   function handleError(e){
      console.log('WebSocket error',e)
   }
   init()
   //返回WebSocket实例
   return ws
}
export default useWebSocket

send()为发送函数。handleMessage就是处理封装中的'message'监听,当收到消息时触发：

import useWebSocket from '../hook'
data(){
      return{
           ws : useWebSocket(this.handleMessage)
      }
 },
methods:{
    sendmsg(){
        //调用WebSocket的发送函数
        this.ws.send(/*string*/)
     },
     handleMessage(e){
       console.log(e)
     }
}

WebSocke后端搭建

新建一个文件夹，cmd执行以下指令：

npm install -y
npm i [email protected]

创建js文件， ↓↓↓↓↓参考代码↓↓↓↓↓。

const WebSocket = require('ws')
;((Ws)=>{
   const server = new Ws.Server({port:3000})
   const init=() => {
      bindEvent();
   }

   function bindEvent(){
      server.on('open',handleOpen)
      server.on('close',handleClose)
      server.on('error',handleError)
      server.on('connection',handleConnection)
   }
   
   function handleOpen(){
      console.log("WebSocket Open")
   }  

   function handleClose(){
      console.log("WebSocket Close")
   }
   
   function handleError(){
      console.log("WebSocket Error")
   }
    //Connection之后才处理消息函数
   function handleConnection(ws){
      console.log('WebSocket Connection!')
      //绑定消息函数
      ws.on('message',handleMessage)
   }
   //消息函数
   function handleMessage(msg){

      server.clients.forEach((c)=>{
         c.send(msg)
      })
      console.log(msg)
   }
   init()
})(WebSocket)