1. websocket 是什么？
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
2. 作用场景
即时通讯（各种聊天软件）
多玩家在线游戏（数据需要同步刷新）
协同编辑/编程
股票基金报价
体育实况、新闻更新
…
通常来说，对数据敏感度高、需要及时更新数据的产品基本都会用到 websocket
3. 传统http实现推送技术的弊端
传统的技术一般使用 http + 定时器的方式（轮询）去实现
很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。
这种传统的模式带来很明显的缺点，即：浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。
这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源
4. WebSockt 常用API
- 实例化websocket的对象
const ws = new WebSocket('ws://127.0.0.1:8080')
- 监听连接状态
ws.onopen = function () { console.log('ws连接状态：' + ws.readyState); // 成功则发送一个数据 ws.send('111'); }
- 接收消息
ws.onmessage = function(data){ // data.data 就是接收到的数据 }
- 发送消息
ws.send(data) // data必须是字符串
- 监听连接关闭事件
ws.onclose = function () { console.log('ws连接状态：' + ws.readyState); }
- 监听错误
ws.onerror = function (error) { console.log(error); }
5. WebSocket实现聊天室
1. 项目结构
2.app.js 代码
let WebSocketServer = require('ws').Server; wss = new WebSocketServer({ip: '0.0.0.0', port: 8080 }); let wsolist = [] console.log('启动服务器：ws://127.0.0.1:8080'); wss.on('connection', function (ws, req) { wsolist.push(ws) console.log('和客服端' + req.connection.remoteAddress + '建立了一个连接，是连接的第'+ (wsolist.length +1) +'个用户'); ws.on('message', function (message) { console.log(message.toString()); wsolist.forEach((wso) => { wso.send(message.toString()) }) }); ws.on('close', function close() { wsolist = wsolist.filter(obj => obj !== ws) }); });
3. index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ margin: 10px 0; border: 1px solid pink; } </style> </head> <body> <h1>websocket聊天室</h1> <div> <input type="text" placeholder="请输入消息内容" id="msg"> <button id="sendBtn">发送</button> <button id="closeBtn">关闭ws聊天室</button> </div> <div class="container"> </div> </body> </html>
4. js 代码
// 1. 获取元素 let msg = document.querySelector('#msg') let send_btn = document.querySelector('#sendBtn') let close_btn = document.querySelector('#closeBtn') let container = document.querySelector('.container') // 2. 建立ws连接 let ws = new WebSocket('ws://192.168.29.54:8080') // 3. 实现消息的发送 send_btn.addEventListener('click', function(){ ws.send(msg.value) msg.value = '' }) // 4. 实现消息的接收 ws.onmessage = function(data){ console.log(data.data); container.innerHTML += ` <div>${data.data}</div>` } // 5. 关闭ws连接 close_btn.addEventListener('click', function(){ ws.close() })
