前言

1.相信大家在实际的项目开发过程中一定遇到过需要前端在后端执行了某些动作之后也需要去执行一些逻辑和操作的情况吧。在一些情况使用很频繁的场景下一般都是通过 webScoket 来实现的。

2.关于webScoket:WebSocket 是一个协议，它提供了在单个TCP连接上进行全双工通讯的机制。与传统的HTTP请求/响应模型不同，WebSocket 允许服务器主动发送信息给客户端，同时客户端也可以主动发送信息给服务器。 以下是WebSocket的一些关键特点：

(1). 全双工: 服务器和客户端可以同时发送消息，不需要等待另一方完成。

(2). 持久连接: 一旦WebSocket连接被建立，它将持续存在，直到客户端或服务器结束它。

(3). 性能: 由于没有频繁的创建连接和关闭连接的开销，WebSocket非常高效。

3.下面给大家分享一篇前后端实现webScoket通信的完整逻辑。这里的客户端使用都是Vue3,服务端使用的是node.js

1.先实现服务端node.js scoket方法的封装

(1).先安装ws(基于node.js开发的webScoket 库)

  npm install ws

(2).新建一个webScoket.js文件,服务端的代码逻辑如下所示

const Scoket = require('ws')
// 当前scoket对象
let scoket = {}
//当前scoket连接信息
let ws = {}

/**
 * @function createServer  scoket实列创建
 * @param  {Object} options 
**/
const createServer = () => {
	scoket = new Scoket.Server({ port: 8080 });
	scoket.on('connection', (ws, req) => onConnection(ws, req))
}

//与服务端建立连接
const onConnection = (wss, req) => {
	console.log('建立连接', req.url);
	ws = wss
	ws.send(JSON.stringify({ data: '建立连接' }));
	ws.on('message', (message) => {
		scoket.clients.forEach((client) => {
			if (client.readyState === Scoket.OPEN) {
				// 将收到的消息转化为二进制代码
				const msg = message.toString()
				console.log('收到消息', msg)
				ws.send(msg)
			}
		})
	});
	ws.on('close', (msg) => onClone(msg));
	ws.on('error', (err) => onError(err))
}

/**
 * @function onMessage  scoket 客户端消息接收 
 * @param  {String} message 接收到的消息
 */
const onMessage = (callback) => {
	console.log(callback)
	ws.on('message', (message) => {
		scoket.clients.forEach((client) => {
			if (client.readyState === Scoket.OPEN) {
				console.log('收到消息callback', message)
				callback(message)
			}
		})
	});
}


/** 
 * WebScoket  初始化连接
 * @function onClone  客户端连接断开 
**/
const onClone = () => {
   
}

/**
* @function onError  scoket错误处理 
* @param  {String} callback  错误回调
*/
const onError = (callback) => {
	ws.on('error', (err) => {
		callback(err)
	})
}

/**
  * @function onSend  scoket  向客户端发送消息 
  * @param  {String} message  发送给客户端的消息
*/
const onSend = (message) => {
	ws.send(message)
}

module.exports = {
	createServer,
	onSend,
	onMessage,
	onClone,
	onError
}

(3).在某个接口模块中去使用: 在完成新增角色的操作之后通过onSend方法向前端推送一条状态码消息 （Add_Role_Success）

webScoket.onSend('Add_Role_Success') 第39行

let express = require('express');
let router = express.Router();
let db = require('../db').roleInfo
let dbMenu = require('../db').menuInfo
let reqRules = require('../utils/reqDataRule').reqMultipleRule   //请求内容长度验证
let submitRule = require('../utils/reqDataRule').reqSubmitRule  // 必填参数 验证
let queryInfoHandle = require('../utils/queryInfoHandle')
let webScoket = require('../utils/webScoket') //scoket方法

/** 
 * 新增角色
 * @param {String} describe 角色描述
 * @param {String} name 名称
 * @param {Array} roleMenu_List 菜单列表
 * @type {POST}
*/

router.post('/addRole', async (req, res, next) => {
    try {
        const { name, describe, roleMenu_List } = req.body

        if (submitRule({ name, describe })) {
            return res.jsonp({ code: 0, message: '参数不完整' })
        }

        if (reqRules({ name, describe }, 40)) {
            return res.jsonp({
                code: 0,
                message: '异常'
            })
        }

        const obj = { name, describe, status: 1, roleMenu_List }
        //根据id 找到对应菜单
        let findMenu = await dbMenu.find({ "_id": { $in: roleMenu_List } })
        obj.roleMenuName_List = findMenu.map(v => v.name)
        //更新角色菜单
        await db.insertMany(obj)
        webScoket.onSend('Add_Role_Success')
        return res.jsonp({ code: 1, message: '操作成功' })
      } catch {
        next({ message: '接口错误' })
    }
})

2.客户端Vue3中scoket方法封装的实现

(1).客户端webScoket.js代码封装逻辑

(2).因为webScoket建立连接是前端向后端主动发起的，因此客户端需要处理更多的逻辑和场景如：webScoket的心跳检测机制，连接断开和重新连接等。

/** 
 * scoket 连接方法
 * @param {String} scoketUrl scoket连接url
 * @param {Boolean} isConcent scoket 连接状态
 * @param {Function} globalCallback   scoket 回调函数 
 * @type {}
 * @return {} 
*/

let scoket = null
let isConcent = false //连接状态
let globalCallback = (e) => { e }
const scoketUrl = process.env.VUE_APP_WEBSCOKET_URL
//scoket 初始化连接
const webScoketInit = () => {
	return new Promise((reslove, reject) => {
		try {
			scoket = new WebSocket(scoketUrl)
			if (typeof WebSocket == undefined) {
				alert('您的浏览器不支持socket！使用谷歌浏览器！')
			} else {
				//监听socket连接
				scoket.onopen = () => {
					console.log('客户端scoket连接成功')
					isConcent = true
					//开始心跳检测
					heartCheck.start()
					reslove()
				}
				scoket.onmessage = onMessage
				//监听socket错误信息
				scoket.onerror = onError
				//关闭scoket 连接
				scoket.onclose = onClose
			}
		} catch {
			throw ('scoket连接错误')
		}
	})
}

//scoket 消息监听
function onMessage(msg) {
	//收到服务端心跳检测返回消息 重置心跳
	if (msg.data == 'HeartBeat') {
		console.log('收到服务端心跳检测')
		heartCheck.reset()
	} else {
		//如果不是心跳检测回应则触发消息回调
		globalCallback(msg.data)
	}
}

//监听socket错误信息
function onError(err) {
	isConcent = false
	console.log('err', err)
}

//监听socket关闭
function onClose(err) {
	isConcent = false
	//关闭scoket
	scoket.close()
	console.log('执行重连')
	//重新连接
	webScoketInit()
}

/** 
 * 消息监听方法
 * @param {Function} callback  回调函数
 * @return {} 
*/

function messageListener(callback) {
	if (typeof callback == 'function') {
		globalCallback = callback
	}
}

/** 
 *  向服务端发送消息的方法
 * @param {String} message 发送的内容（必须是字符串）
 * @return {} 
*/
function messageSend(message) {
	const { readyState, OPEN, CLOSED, CLOSING, CONNECTING } = scoket
	switch (readyState) {
		// CONNECTING：值为0，表示正在连接。
		case CONNECTING:
			break;
		// OPEN：值为1，表示连接成功，可以通信了。
		case OPEN:
			scoket.send(message)
			break;
		// CLOSING：值为2，表示连接正在关闭。
		case CLOSING:
			break;
		// CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
		case CLOSED:
			break;
		default:
			break;
	   }
  }

/*
  scoket 心跳检测机制方法
  每间隔 30s 向服务端发起一个询问 HeartBeat 如果服务端返回消息表示连接正常则重置心跳
  如果scoket 抛错则需要进行scoket重连
*/
let heartCheck = {
	timeout: 30000,// 每隔30s 进行一次检测 
	timeoutObj: null, // 延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
	reset: function () {
		clearTimeout(this.timeoutObj);
		this.start();
	},
	start: function () {
		this.timeoutObj = setTimeout(function () {
			console.log('发送心跳检测')
			//如果连接开启则发送心跳
			if (isConcent) {
				scoket.send("HeartBeat");
			} else {
				//否则清除心跳检测对象
				clearTimeout(this.timeoutObj);
			}
		}, this.timeout)
	}
}

export {
	webScoketInit,
	messageSend,
	messageListener,
}

(3).把封装好的方法挂载在全局中

import { messageListener, messageSend } from './webScoket'; //webscoket 全局方法
const globalProperties = {
	install(Vue) {
		Vue.config.globalProperties.$scoketEvent = {
			messageSend,
			messageListener,
		}
	}
}

export default {
	...globalProperties
}

(4).在获取用户信息接口调用成功之后使用 webScoketInit 方法创建 scoket通信连接

import VueCookies from 'vue-cookies'
import { ACCESS_TOKEN } from '@/config/constant'
import { getUserInfo, login } from '@/api/login'
import { webScoketInit } from '@/utils/webScoket'; //webscoket 全局方法
const logins = {
    state: {
        userInfo: {},
        btnAuthList: [],//按钮权限列表
    },
    mutations: {
        //设置当前用户信息
        SET_USER_INFO: (state, result) => {
            state.userInfo = result.userInfo
        },
        //设置当前账号权限按钮
        SET_USER_BTN: (state, btnAuthList) => {
            state.btnAuthList = btnAuthList
        },
    },
    actions: {
        GetUserInfo({ commit, dispatch }) {
            return new Promise(async (reslove, reject) => {
                const { data } = await getUserInfo()
                if (!data) {
                    return dispatch('Logout')
                }
                commit('SET_USER_INFO', data)
                commit('SET_USER_BTN', data.btnAuthList)
                //scoket 初始化连接
                webScoketInit()
                reslove(data)
            })
        },
 
    }
}

export default logins

(5)在前端的某个页面中去使用 messageListener 监听方法 和 messageSend 发送消息方法

<script setup>
import { getCurrentInstance, onMounted } from "vue"
const { $scoketEvent } = getCurrentInstance().proxy;

// 开始监听消息
$scoketEvent.messageListener(msg => {
   console.log('scoket监听接收消息测试:',msg);

});

onMounted(() => {
  $scoketEvent.messageSend("scoket发送消息测试");
});

</script>

完整的代码地址可参考：

客户端：gitee.com/ZHANG_6666/…

服务端：gitee.com/ZHANG_6666/…