前端+node实现一个简单的聊天室功能

简单的实现一个聊天室功能

目录

前言

一、了解一下WebSocket

我们有了http协议,为什么会出现ws呢？

ws出现之前，我们是怎么实现双向通信的呢？

二、使用到的websocket库

三、聊天室

总结

---

前言

简易的实现一个基础的聊天室功能（发图片和消息）

一、了解一下WebSocket

• 我们有了http协议,为什么会出现ws呢？

  1. http协议是单向协议，所以有一个缺陷：就是通信只能由客户端发起，服务器端无法主动向客户端推送信息。

  • 这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。所以有了支持双向通信的ws.

  ws出现之前，我们是怎么实现双向通信的呢？

  1. 轮询（polling）

  • 轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。 setInterval
  • 缺点是 轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担

  2. 长轮询（long-polling）

  • 长轮询是对轮询的改进版，客户端发送HTTP给服务器之后，看有没有新消息，如果没有新消息，就一直等待。当有新消息的时候，才会返回给客户端。
  • 缺点是 保持连接会消耗资源; 服务器没有返回有效数据，程序超时。

  3. iframe流（streaming）。

  • iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。
  • 缺点是服务器维护一个长连接会增加开销；IE、chrome、Firefox会显示加载没有完成，图标会不停旋转。

二、使用到的websocket库

ws是速度最快的websocket库之一，所以这里后端主要使用到的是ws库。

三、聊天室




 

 

 

 基本功能就入上面三张图所示。更多的功能后续在补上（如果有时间）😀

 附（后端在server文件里,node 文件名执行）：代码地址

---

总结

提示：另外由于在使用Websocket过程中, 可能会出现网络断开的情况（不支持断开重连）。所以提出了一种叫做心跳机制的解决方法（就是客户端每隔固定的时间（自己定）发送一次消息告诉服务器，服务器同时也返回一条消息，如果在规定的时间内没有收到服务器发送的消息，我们就执行重新连接）