1，基础中的基础

1基础

废话不多说，先来看看什么是ws webScoket以下简称ws: ws是一种协议，用于客户端和服务端相互通信。协议标识符是ws，加密则为wss

2.为什么使用ws

传统的http协议中，通信只能有客户端发起，服务端无法主动向客户端推送消息，需通过轮询方式让客户端自行获取，效率极低。

3.ws基础知识点

1-客户端

详细知识点可自行参考其他资料：或者参考 WebSocket - 文档以下知识，只是我遇到的问题需要了解的知识和用到的知识，仅记录一下，不喜勿喷!!!! 1-基础： new WS(url) 创建ws连接 ws.onopen 连接成功，开始通信 ws.onmessage 客户端接收服务端发送的信息 ws.onclose 连接关闭后的回调函数 ws.onerror 连接失败后的回调 ws.readyState 当前连接状态 ws.close 关闭当前连接 ws.send 客户端向服务器发送消息 2：常量 open:1 closeing:2 closed:3

3:举个栗子我们创建一个ws类，用于处理所有通讯事件

class Ws {
  constructor (url) {
    this.ws = new WebSocket(url);
  }

  initWs() {
    this.ws.onopen = () => {}
    this.ws.onmessage = (event) => {}
    this.ws.onclose = (event) => {}
    this.ws.onerror = () => {}
  }

  close() {
    this.ws.close();
  }

  send(data) {
    if (this.ws.readyState === this.ws.OPEN) {
      this.ws.send(data);
    }
  }
}

2-服务端

关于服务端可查看其他参考资料或这里使用ws与客户端通讯：ws - 文档

废话不多说可以看服务端代码：

import WebSocket, { WebSocketServer } from "ws";
const wss = new WebSocketServer({ port: 8080 });
const app = express();

const send = (ws, data) => { // 向客户端发送消息
  ws.send(JSON.stringify(data));
}

const broadcast = (data) => { // 向所有客户端广播消息
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      send(client, data);
    }
  });
}

wss.on('open', () => { // 连接成功的回调函数
  console.log('connected');
});

wss.on('close', () => { // 连接关闭的回调函数
  console.log('disconnected');
});

wss.on('connection', (ws) => { 
  ws.on('message', (message) => {
    // 接收客户端发的消息
  });
});

app.listen(3000, () => {
  console.log('Start Service On 3000');
});

3，调试

如何在浏览器查看ws请求呢？其实和我们平时http请求差不多的，打开控制台，选择netWork下的ws即可查看通讯情况

暂时先这么多吧，其实还有ws如何创建连接的知识展示，但是比较底层，懒得去深究，如果需要，可以自行查阅资料，

ws并不是全新协议，而是利用http协议来建立连接，可自行了解。

WebScoket通信，基础知识，白嫖怪~~~~