WebSocket：实现http双向通信

WebSocket

HTML5 新增的一个特性，可实现 http 双向通信

单向通信：服务端必须先接受到客户端的请求，才能给客户端回消息

基于 WebSocket 可实现的功能：

1. 聊天室（这里举例）

之前的实现方法：

• 张三、李四、王五，都加入了聊天室
• 每个人都与聊天室的服务器做 轮询请求（setInterval）
• 张三向服务器发一个消息 hello
• 服务器等待下一次的李四、王五的请求过来，接着把 hello 发送给李四、王五

基于 Websocket：

• 张三、李四、王五，都加入了聊天室
• 这三个人都与服务器建立起 ==双向通信链接==
• 张三发一个消息
• 服务器接收到张三的消息后，主动把消息转发给李四、王五

2. 股票交易网站
3. 需要实时更新数据的

实现一个 WebSocket 的聊天室

1. 需要有服务端，使用 nodejs 的第三方模块 ws 来实现服务端代码
2. 需要有客户端，使用浏览器 HTML5

安装ws模块：npm install --save ws

//后端代码 server.js

//1.引入
const WebSocket = require('ws');

//2.创建 ws 服务
const server = new WebSocket.Server({port:3000});

let index = 0; //用于标记每个客户端
let clients = [];//存放当前连接到这个服务的所有客户端对象

//3.监听客户端的请求
server.on('connection', ws => { //这里的 ws 就是当前连接进来的 WebSocket 实例
    console.log('客户端连接起来了');
    //1. 给当前客户端设置一个 index 属性
    ws.index = ++index; //标记客户端
    //2.将当前客户端 push 进 clients
    clients.push(ws);
    
    //ws 监听 message ，data客户端发来的消息
    ws.on('message',(data) => {
         //将data这个消息发送给其他客户端
         //循环遍历 clients 拿到其中所有客户端对象，调用send方法把data发回去，注意排除当前这个客户端
         clients.forEach(item => {
             if(item.index !== ws.index){
                 item.send(`${ws.index} : ${data}`);
             };
         });
    });
})

    <!--前端页面 必须为HTML5-->
    <!--通过js代码-->
<script>
    //1.连接到服务
    let ws = new WebSocket('ws://127.0.0.1:3000')；
   //2.监听 按钮 点击事件
   let btn = document.getElementById('btn');//这是页面中的按钮
   let input = document.getElementById('input');//这是页面中的输入框
   let ulEl = document.getElementById('ul'); //dom缓存 避免多次获取 页面中的ul 数据体
   btn.onclick = function(){ //发消息
       let msgV = input.value;
       ws.send(msgV);
   };  
   //3.监听 服务端的消息 后渲染页面
    ws.onmessage = function (event){
        let msg = event.data;
        let liEl = document.createElement('li');
    };
</script>