原创 回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）

增加一个mes对象，将传送的数据放在对象里

wsServer.js中替换代码

 broadcast(conn.nickname + '进入聊天室')
  broadcast(str)
  broadcast(conn.nickname + '离开聊天室~')
  

为代码：

var mes = {};
    mes.type = "enter";
    mes.data = conn.nickname + "进入聊天室";
	broadcast(JSON.stringify(mes));
 
 var mes = {};
      mes.type = "message";
      mes.data = conn.nickname + "says:" + str;
      broadcast(JSON.stringify(mes));

   var mes = {};
      mes.type = "leave";
      mes.data = conn.nickname + "离开聊天室";
      broadcast(JSON.stringify(mes));

这样可以更方便查看数据，且页面显示更清晰，会显示是哪个人说的什么话~

HTML界面改变+增加shoeMessage中传入的参数
实现用户进入时，显示蓝色，离开显示红色
在HTML的script中，document.body.appendChild之前加入

 function showMessage(str, type){
 //内容省去
 }

if (type == "enter") {
          div.style.color = "blue";
        } else if (type == "leave") {
          div.style.color = "red";
        }

更改 调用showMessage函数时的代码 showMessage(e.data)为

 		var mes = JSON.parse(e.data);
        showMessage(mes.data, mes.type);
``
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200813205248811.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NDA1OQ==,size_16,color_FFFFFF,t_70#pic_center)