webscoket实时通信实现demo【node模拟服务端】

开工前准备工作

1.前后端约定好长链接的URL

（本文举例：域名-127.0.0.1，端口号-8081，路径-/test）

2.前后端约定好发送message指令的格式

（本文格式为 {‘userId’:’ ', ‘message’: ’ '} ）

前端封装可保持长链接的websocket构造函数

1.创建一个普通的websocket连接

function createWebsocket(link) {
   
	// 检查浏览器是否支持websocket
	if (!('WebSocket' in window) && !('MozWebSocket' in window)) {
   
		alert('浏览器暂不支持websocket');
	} else {
   
		var ws = new WebSocket(link);
		initWs(); // 初始化websocket相关的事件监听
	}
}

2.初始化websocket相关的事件监听

function initWs() {
   
	// 连接服务器成功触发
	ws.onopen = function(e){
   
    	logStatus("连接服务器成功"); // 打印log工具函数
    	...// 自定义操作
    	// 开始心跳
    	heartSend.start();
   }
   // 接收服务器的消息触发
   ws.onmessage = function(e){
   
   		let message = "接收到一条服务端信息，message:"+e.data+"";
    	logStatus(message);
   	 	...// 自定义操作
    	// 心跳计时器重启
   		 heartSend