准备工作

1. 了解 websocket 基本知识 https://www.runoob.com/html/html5-websocket.html
2. 了解centrifuge的使用，阅读centrifuge客户端使用文档 https://fzambia.gitbooks.io/centrifugal/content/clients/javascript.html

前端引入centrifuge 插件 （npm、cdn两种方式择一）

• npm方式：

  1. 安装centrifuge依赖：npm install --save centrifuge@1.5.0
  2. 引入centrifuge： import Centrifuge from 'centrifuge'

• cdn方式

  1. 下载centrifuge.js 库，
  2. 并引入<script src='centrifuge.js'></script>

建立连接并授权

1. 从后端获取ws-token: 该token用于websocket连接时授权自己（可参考 centrifuge客户端协议）
2. 建立websocket连接并授权：传入websocket url、刚获取到的ws-token、当前登录用户id等参数, 建立websocket连接并授权自己
3. 连接成功后， 在websocket 后台action 测试消息推送：以dev环境下 websocket url 为例， 如下图：

模拟消息推送.png

完整实现步骤（以npm方式为例）

从npm方式安装依赖 -> 引入插件 -> 获取签名ws-token -> 创建websocket连接并授权 -> 监听事件 -> 断开连接 等一系列步骤实现代码如下：

1. 安装依赖 ：npm install --save centrifuge@1.5.0

2. 引入插件：import Centrifuge from 'centrifuge'

3. 建立连接：

     /**
       * demo以dev环境下 登录用户id=1, 监听消息通知事件msg为例
       */ 
    const params = {
       user_id: 1 // 当前登录用户id
     } 
     // 从后端获取签名用于连接授权（签名根据secret、user、timestamp等，通过hashmap、二进制流、sha256换算得到）
     apiWebsocketSign(params).then(res => {
         const sign = res.access_token // 签名
         const timestamp = res.timestamp // 时间戳
         const user = res.user // 当前登录用户id:1
​
         // 与Websocket端点建立连接,并通过签名授权
         const url = 'wss://××××.com:9112/connection/websocket', 
         let centrifuge = new Centrifuge({
               url: url, // websocket url,不同环境不同, demo以dev环境为例
               user: user,
               timestamp: timestamp,
               token: sign
         })
         centrifuge.connect()
​
         // 监听msg:1 是否有未读新消息
         centrifuge.subscribe('msg:1', (message) => {
             /**
               * user_id=1 用户 的实时系统消息
               * @message {object}: 推送消息内容
               */
                 console.log(message)
           })

           // 连接成功回调
           centrifuge.on('connect', (context) => {
                 console.log('连接成功', context)
           })

           // 断开连接回调
           centrifuge.on('disconnect', (context) => {
                 console.log('断开连接', context)
            })

           // 错误连接回调
           centrifuge.on('error', (error) => {
               console.log('错误连接', error)
           })
​
           // 监听窗口关闭事件，主动关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
           window.onbeforeunload = () => {
                 centrifuge.disconnect()
           }
     })
}

注意点

1. centrifuge不能用最新版本，新版不兼容，直接选择1.5.0版本
2. url注意前缀替换： http -> ws， https -> wss, 且url后面追加路径 /connection/websocket

后端注意点

• 提供前端不同环境（dev/test/pre/info）下的websocket url

• SSL证书有效（不能过期）

• 返回有效签名ws-token 给前端（用于连接时授权）

• 提供前端需要监听的事件方法，如监听userid = 1用户的 消息推送： 此时告知前端要监听 msg:1即可

（备注：如有讲错请在评论区指出，我可不能误人子弟啊哈~~~ 原创文章，欢迎转载，转载请注明出处，多谢支持~~~）