使用WebSocket实现聊天室功能(上)

1.WebSocket概括

WebSocket技术可以弥补Ajax传统的每隔一毫秒调用一次接口的缺陷(有数据发送就是有，没有就是没有)，相比Ajax来说 要节约很多资源，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据因此WebSocket这项技术适用于聊天室,弹幕,实时信息提示......

注意事项 

1.GET请求的地址以ws://开头的地址；

2.请求头Upgrade: websocket和Connection: Upgrade表示转换成为WebSocket连接；

Sec-WebSocket-Key是用于标识这个连接，并非用于加密数据；

Sec-WebSocket-Version指定了WebSocket的协议版本

2.客户端的实现 （前端）

！！！醒醒各位，开始发车咯   ─=≡Σ(((つ•̀ω•́)つ

1.第一步

创建websocket对象

// 这是人家websocket官方提供测试的url , 这个是由后端提供, 可以问后端要
let socket = new WebSocket('ws://echo.websocket.org')

Tips : websocket的几个常用事件如下

open	websocket对象.onopen	建立连接时触发
message	websocket对象.onmessage	客户端接收服务端数据时触发
error	websocket对象.onerror	通信错误时触发
close	websocket对象.onclose	连接关闭触发

websocket常用方法

send()方法，，用于给服务端发送数据 在控制台可以看到是否发送成功

  var webSocket = new WebSocket('ws://xxxxxxxxxx...');

  //打开
  webSocket.onopen = function () {
    webSocketOpen();
  };
  //收信
  webSocket.onmessage = function (msg) {
    webSocketOnMessage(msg);
  };
  //关闭
  webSocket.onclose = function () {
    webSocketClose();
  };
  //连接发生错误的回调方法
  webSocket.onerror = function () {
    console.log("WebSocket连接发生错误");
  };

  //发送数据
 function webSocketSend (data) {
  //在这里根据自己的需要转换数据格式
  webSocket.send(JSON.stringify(data));
  console.log('发送数据',JSON.stringify(data));

}