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 ws@7.3.0
创建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)