WebSocket
HTML5 新增的一个特性，可实现 http 双向通信
单向通信：服务端必须先接受到客户端的请求，才能给客户端回消息
基于 WebSocket 可实现的功能：
- 聊天室（这里举例）
之前的实现方法：
- 张三、李四、王五，都加入了聊天室
- 每个人都与聊天室的服务器做 轮询请求（setInterval）
- 张三向服务器发一个消息 hello
- 服务器等待下一次的李四、王五的请求过来，接着把 hello 发送给李四、王五
基于 Websocket：
- 张三、李四、王五，都加入了聊天室
- 这三个人都与服务器建立起 ==双向通信链接==
- 张三发一个消息
- 服务器接收到张三的消息后，主动把消息转发给李四、王五
- 股票交易网站
- 需要实时更新数据的
实现一个 WebSocket 的聊天室
- 需要有服务端，使用 nodejs 的第三方模块 ws 来实现服务端代码
- 需要有客户端，使用浏览器 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>
