记一次测试webSocket的连接

记一次测试webSocket的连接

注：使用node.js本地连接测试了一下，最后与后端进行连接（测试可通）

前端页面：

使用了elementUi库

 <template>
 <div class="input-box">
     <el-input type="textarea" :rows="4" placeholder="" ref="sendMsg" resize="none" v-model="contentText" @keyup.enter="sendText()">
     </el-input>
     <el-button class="btn" slot="reference" :class="{['btn-active']:contentText}" @click="sendText()">发送
     </el-button>
 </div>
 </template>

css代码：（每个页面样式不同，仅供参考）

.el-textarea {
 display: block;
}
.el-textarea__inner {
  border: 0;
  border-radius: 0.2rem;
  font-size: 0.88rem;
  color: #000;
}
.btn {
  width: 2rem;
  height: 2rem;
  min-width: 4rem;
  background: #f5f5f5;
  padding: 0.5rem;
  font-size: 0.88rem;
  color: black;
  text-align: center;
  border-radius: 0.2rem;
  margin-left: 0.5rem;
  transition: 0.5s;
  &:hover {
    background: #409eff;
    color: white;
  }
}
.btn-active {
   background: #409eff;
   color: white;
}

js代码：

import http from "../../../api/http.js"   //这里将ws连接地址放在了http里
export default {
   name: "Chat",
   data() {
     return {
        heartCheck: {
        timeout: 28 * 1000, //30分钟发一次心跳
        timeoutObj: null, //心跳心跳倒计时
        serverTimeoutObj: null, //心跳倒计时
        timeoutnum: null, //断开后重连倒计时
      },
      ws: null, //建立连接
      lockReconnect: false, //是否真正建立连接
      wsHost: http.wsHost, //地址
      contentText: "", //input输入的值
  };
},
mounted() {
  this.initWebSocket();  //进入页面先建立连接
},
destroyed: function() { //页面销毁时关闭长连接
  this.ws.close()  
},
//进入页面创建websocket连接
initWebSocket() {
  let _this = this;
  //判断页面有没有存在websocket连接
  if (window.WebSocket) {
    //测试本地IP地址8181  ws://localhost:8181端口号要与后端配置的一致
    let ws = new WebSocket(_this.wsHost);
    _this.ws = ws;
    ws.onopen = function(e) {
      console.log("服务器连接成功");
      //开启心跳
      _this.start();
    };
    ws.onclose = function(e) {
      console.log("服务器连接关闭");
      console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
      //重连
      _this.reconnect();
    };
    ws.onerror = function() {
      console.log("服务器连接出错");
      //重连
      _this.reconnect();
    };
    ws.onmessage = function(e) {
      //收到服务器信息，心跳重置
      _this.reset();
      //接收服务器返回的数据
      if (e.data != 0) { //0为心跳检测
        return
      }
      console.log('接受到的消息')
      console.log(e.data)
    }
  }
},
// 开启心跳
start() {
  var self = this;
  //self.heartCheck.timeoutObj && clearTimeout(self.heartCheck.timeoutObj);
  //self.heartCheck.serverTimeoutObj && clearTimeout(self.heartCheck.serverTimeoutObj);
  self.heartCheck.timeoutObj = setTimeout(function() {
    //这里发送一个心跳，后端收到后，返回一个心跳消息
    console.log(self.ws.readyState)
    if (self.ws.readyState == 1) { //如果连接正常
      self.ws.send(0);
      console.log("发送心跳")
    } else { //否则重连
      self.reconnect();
    }
    self.heartCheck.serverTimeoutObj = setTimeout(function() {
      //超时关闭
      self.ws.close();
    }, self.heartCheck.timeout);
  }, self.heartCheck.timeout)
},
//重置心跳
reset() {
   var that = this;
   //清除时间
   clearTimeout(that.heartCheck.timeoutObj);
   clearTimeout(that.heartCheck.serverTimeoutObj);
   //重启心跳
   that.start();
},
//重连
reconnect() {
  console.log("重新连接")
  var that = this;
  if (that.lockReconnect) {
    return;
  }
  that.lockReconnect = true; //没连接上会一直重连，设置延迟避免请求过多
  that.heartCheck.timeoutnum && clearTimeout(that.heartCheck.timeoutnum);
  that.heartCheck.timeoutnum = setTimeout(function() {  //新连接
    that.initWebSocket();
    that.lockReconnect = false;
  }, 5000)
},

node.js进行测试

• 利用node.js搭建一个后端服务器

• 可以新建一个sever.js，也可以直接写在app.js里面

• 终端下载npm install --s ws

//websocket后端连接测试
var userNum = 0; //统计在线人数
var chatList = []; //记录聊天记录
var WebSocketServer = require('ws').Server;
wss = new WebSocketServer({
	port: 8181
}); //8181 与前端相对应
//调用 broadcast 广播，实现数据互通和实时更新
wss.broadcast = function(msg) {
	wss.clients.forEach(function each(client) {
		client.send(msg);
	});
};
wss.on('connection', function(ws) {
	userNum++; //建立连接成功在线人数 +1
	wss.broadcast(JSON.stringify({
		users: userNum,
	})); //建立连接成功广播一次当前在线人数
	console.log('Connected clients:', userNum);
	saleRecord();
	//接收前端发送过来的数据
	ws.on('message', function(e) {
		var resData = JSON.parse(e)
		console.log('接收到来自clent的消息：' + resData.msg)
		chatList.push({
			userId: resData.userId,
			content: resData.msg
		}); //每次发送信息，都会把信息存起来，然后通过广播传递出去，这样此每次进来的用户就能看到之前的数据
		wss.broadcast(JSON.stringify({
			userId: resData.userId,
			msg: resData.msg
		})); //每次发送都相当于广播一次消息
	});
	ws.on('close', function(e) {
		userNum--; //建立连接关闭在线人数 -1
		wss.broadcast(JSON.stringify({
			funName: 'userCount',
			users: userNum,
			chat: chatList
		})); //建立连接关闭广播一次当前在线人数
		console.log('Connected clients:', userNum);
		console.log('长连接已关闭')
	})
})
var time = setTimeout(saleRecord, 5000);
function saleRecord() {
	wss.on('connection', function(ws) {
		console.log("测试后端传递信息")
		ws.send("aaaaxxxx");
	})
	clearTimeout(time);
	setTimeout(saleRecord, 5000);
}