如何通过JS WebSocket技术搭建一个简易的在线聊天室？

本文共计2305个文字，预计阅读时间需要10分钟。

目录+ 短轮询（Polling）+ 长轮询（Long-Polling）+ WebSocket+ 通信原理+ 实现简单聊天+ 心跳保活+ 总结+ 短轮询（Polling）+ 短轮询的实现思路：浏览器端每几秒向服务器端发送HTTP请求，服务器端收到请求后立即返回数据，无论是否有新数据。

目录

• 短轮询（Polling）
• 长轮询（Long-Polling）
• WebSocket
• 通信原理
• 实现简单单聊
• 心跳保活
• 总结

短轮询（Polling）

短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送 HTTP 请求，服务端在收到请求后，不论是否有数据更新，都直接进行响应。在服务端响应完成，就会关闭这个 TCP 连接，代码实现也最简单，就是利用 XHR， 通过 setInterval 定时向后端发送请求，以获取最新的数据。

setInterval(function() { fetch(url).then((res) => { // success code }) }, 3000);

优点：实现简单。

缺点：会造成数据在一小段时间内不同步和大量无效的请求，安全性差、浪费资源。