前端项目中使用websocket来实现即时通讯-以聊天室为例

介绍

websocket可以在用户的浏览器和服务器之间打开交互式通信会话,使用websocket可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

本文通过构建一个简易的websocket聊天室，简单介绍如何使用websocket在服务端和浏览器端进行通信。

首先介绍一下前端websocket一些基本接口。

Websocket API

• 实例化

let socket = new Websocket(url[, protocols])
// 实例化直接建立连接，连接完成可以开始通讯了

• 发送消息

socket.send(msg)

• 关闭

socket.close()

Websocket 回调函数

• onopen
  连接建立成功触发，可以开始通讯了。
• onmessage(event)
  接收消息函数，服务器返回的数据在event.data中，接收到的数据是字符串的格式。
• onclose
  socket关闭时被调用。
  -onerror
  用于指定连接失败后的回调函数。
  指定回调函数的示例：

socket.onmessage = (event) => {
   
  console.log(event.data)
}

Websocket 状态码

实例化后，socket的可能的状态码可以通过访问socket对象的常量属性获得。
可能的状态码：

- socket.CONNECTING - 0 # 正在链接，实例化至此时onopen触发之间
- socket.OPEN - 1	# 触发onopen，之后一直保持该状态直到断开连接
- socket.CLOSING - 2 # 关闭连接挥手阶段 
- socket.CLOSED - 3 # 连接已关闭或者连接未建立。 当服务器关闭或者调用close断开连接并且挥手结束后

socket当前的状态码可以通过readyState属性进行访问:

if (socket.readyState == socket.OPEN) {
    // 判断是否在正常连接状态
  xxx
} 

---

Websockt聊天室实现

只是一个非常简易的demo，效果图如下：

github地址:

• 服务端 python: https://github.com/Lushenggang/websocket_python
• 前端 vue: https://github.com/Lushenggang/websocket_vue

前端

前端需要主动建立连接，同时实现收发消息功能。
1.我们封装一个websocket类，对类进行实例化就创建了一个socket连接：
文件路径：src/socket/socket.js

class CWebSocket {
   
  constructor (url) {
   
    this.socket = new Websocket(url)
  }
}

2. 发消息函数

• 因为收发的消息是字符串格式，所以需要用JSON.stringify转为字符串。
• 实例化后就可能会调用发送消息，但是此时连接可能未建立完成，所以用一个待发送消息列表将未发送的消息保存下来，等连接成功后发送。

class CWebSocket {
   
  constructor (url) {
   
    this.socket = new Websocket(url)
  	this.waitingList = []
  	this.socket.open = (...args) => {
   
  		this.checkWaitingList()
  	}
  }
  checkWaitingList () {
   
  	this.waitingList.forEach(this.C2SMessage)
  },
  C2SMessage (data) {
   
  	if (this.socket.readyState !== this.socket.OPEN) {
   
  		this.waitingList.push