Skip to content
/ im Public

即时通讯的demo,帮助快速理解几种常见的通讯方式

Notifications You must be signed in to change notification settings

kangjs7854/im

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

运行方式

1. 克隆项目到本地

git clone https://github.com/kangjs7854/im.git

2. client为浏览器客户端 server为node服务端,进入server文件夹,安装express依赖,运行服务器

cd server 
npm i 
node index.js//什么都没发生才是正确的---鲁迅

打开浏览器输入http://localhost:3000/ 查看服务器运行状态

3. 打开index.html页面,使用cdn引入了vue和axios,可以在代码中调试不同的通讯方式

短轮询

就是浏览器不断的发送http请求,前往服务器获取新的内容

一般常见方法是就是使用定时器

  • 优点: 实现非常简单,兼容性比较好
  • 缺点:非常消耗资源,造成浪费

长轮询

分为基于http的长轮询,以及基于iframe的长连接流模式

浏览器发送请求后服务端不会立即返回数据,保持连接状态直到有数据更新才返回给浏览器

  • 优点:相比短轮询,减少了一定次数的http请求
  • 缺点:还是会造成一定资源的浪费

sse协议通讯

server sent event 服务端推送事件

sse是一个轻量级的协议,与websocket相比,不需要重新另起一个服务,通过设置响应头为事件流,告诉浏览器不会关闭该链接,等待服务器不断的发送结果 浏览器端调用EventSource这个构造函数创建一个实例,该实例具有打开连接,监听服务器message等方法,比较坑的就是小程序对该协议还不支持

websocket通讯

传统的http请求是以一应一答的方式进行数据传输,这样有一个缺陷:通信只能通过客户端发起

所以为了完成即时通讯的需求,我们只能通过轮询的方式, 每隔一段时间发起请求,检查服务器是否有新的消息,但是始终有这个资源的浪费,效率低下等问题, 于是就有了websocket的诞生。

websocket最大的特点就是浏览器和服务器可以互相通信

  1. 建立在tcp协议上
  2. 协议标识符为ws,加密协议为wss
  3. 不受同策策略的限制

使用nodejs开发websocket的协议很方便,可以使用各种库,类似于express-ws,socket.io等等 该demo使用的是ws的库,通过创建websocket构造函数的实例来发起连接,注意这里浏览器也要生成websockt的实例发起连接

About

即时通讯的demo,帮助快速理解几种常见的通讯方式

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published