前端实现WebSocket即时通讯

要实现客户端与服务器端的通信,最常接触的是http(https)协议,http通信只能是客户端发起请求,服务器响应。服务器不能主动向客户端传递消息。
HTTP 协议无法做到服务器主动向客户端推送信息,2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话,即:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。

  • WebSocket 协议的底层协议也是TCP协议
  • WebSocket 协议的标识符为ws,加密后为wss
  • WebSocket 协议没有同源限制,即WebSocket 协议可以跨域通信
  • WebSocket 协议是有状态的,是前后端交互的长连接,即建立连接后可以保持连接状态,通信时可以省略部分状态信息
  • WebSocket 协议可以发送文本,也可以发送二进制数据

客户端实现

客户端可以通过WebSocket 构造函数创建WebSocket 对象创建和管理 WebSocket 连接,并通过该连接发送和接收数据的 API。
前端实现WebSocket即时通讯_第1张图片

属性

说明

readyState

当前 WebSocket 的链接状态 , 0:正在链接中 1:已经链接并且可以通讯 2:连接正在关闭 3;连接已关闭或者没有链接成功

onopen

连接成功后的回调

onerror

连接失败后的回调

onmessage

从服务器接受到信息时的回调

onclose

连接关闭后的回调

const webSocket = new WebSocket('ws://localhost:5001')

webSocket.onopen = function () {
  console.log('连接成功...')
  webSocket.send('Hello!')
}
webSocket.onerror = function () {
  console.log('连接失败...')
}
webSocket.onmessage = function (event) {
  console.log('接收到消息...' + event.data)
}
webSocket.onclose = function () {
  console.log('连接已关闭...')
}

更详情的WebSocket对象参考:https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

WebSocket重连

由于网络的不确定性和websocket自身的问题,页面长时间打开的情况下有时会发生websocket连接的断开,为了避免这类情况引起的程序问题,可以让WebSocket对象每间隔一段时间和服务器通信一次,一旦发生异常,则重新建立连接,称为心跳检测机制,形象的说就是客户端和服务端通过发送心跳向对方证明自己还活着。

var lockReconnect = false // 是否允许重新连接
var timeout = 1000 * 20 // 心跳间隔
var reTimeout = 1000 * 10 // 重连间隔
var timeoutTimer = null // 心跳定时器
var reTimeoutTimer = null // 重连定时器
var webSocket = null

function heartCheckStart () {
  timeoutTimer = setTimeout(function () {
    webSocket.send('HeartBeat')
  }, timeout)
}

function heartCheckReset () {
  clearTimeout(timeoutTimer)
  heartCheckStart()
}

function createWebSocket () {
  webSocket = new WebSocket('ws://localhost:5001')
  webSocket.onopen = function () {
    console.log('连接成功...')
    heartCheckStart()
  }
  webSocket.onerror = function () {
    console.log('连接失败...')
    reConnect()
  }
  webSocket.onmessage = function (event) {
    console.log(event.data)
    heartCheckReset()
  }
  webSocket.onclose = function (event) {
    console.log('连接已关闭...')
    console.log('websocket 断开: ' + event.code + ' ' + event.reason + ' ' + event.wasClean)
    reConnect()
  }
}

// 重连
function reConnect () {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  // 没连接上会一直重连,设置延迟避免请求过多
  reTimeoutTimer && clearTimeout(reTimeoutTimer)
  reTimeoutTimer = setTimeout(function () {
    createWebSocket()
    lockReconnect = false
  }, reTimeout)
}

createWebSocket()

服务器端实现

真实的项目中服务器端是由专人负责的,为了模拟真实的通信过程,这里简单用node搭建一个服务来实现WebSocket通信。

node搭建WebSocket服务器

要确保安装node,安装node运行环境,请下载node 安装包进行安装

一、新建文件夹demo,然后用npm init命令新建一个项目ws-demo

mkdir demo
cd demo
npm init

二、安装依赖ws

npm install ws

三、修改入口文件index.js

const WebSocket = require('ws') 

const ws = new WebSocket.Server({ port: 5001 })
ws.on('connection', ws => {
  console.log('server connection')

  ws.on('message', msg => {
    console.log('服务端接收的消息:', msg)
    ws.send('HeartBeat')
  })

  ws.send('连接已建立')
})

四、运行index.js

node index.js

你可能感兴趣的:(前端,html,websocket,前端,http)