socket.io 实现在线聊天室

效果图.gif

websocket工作机制

• WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。websocket链接建立后，服务端和客户端可通过连接通道自由通信。wx协议也有类似于https的wss协议，也是多了一层TLS协议。
• websocket具体详细的内容就不多做介绍了，因为我这次使用的socket.io框架，写起来的语法和原生websocket语法还是有很大差别的。

Socket.io简介

• socket.io可以看做是一个对websocket进行了封装的一个框架，目的也是为了实现客户端和服务端的全双工通信。socket.io的底层是engine.io，engine.io在不支持websocket的浏览器中，会使用ajax的长轮询实现效果。
• 具体过程，浏览器和服务端首先建立xhr链接，第一次握手后，服务端返回浏览器一个upgrades字段，告诉前端可以升级为websocket协议，socket.io客户端的框架会进行环境监测支持websocket的话，就会将xhr链接升级为websocket。建立起一个websocket连接后，服务器和浏览器之间还会定期的ping-pong来确定网络链接是否正常。

具体实现

• 再来看下具体实现的代码如何写，socket.io官网上面的文档和教程还是挺详细的，而我们要实现这个多人聊天室也只需要其中一些比较基本的api即可。

服务端部署

• 服务端我用的node，直接用Npm安装socket.io，可以用socket.io直接搭建服务器，也可以在原有的express/koa上部署，我之前用的express，这里就是将socket.io添加到原有的express服务器上：

let app = new (require('express'))()
const server = app.listen(8081, () => {
  let peopleCounts = 0
  let io = require('socket.io')(server)
  io.on('connection', function (client) {
    // 这里的作用域是局部的，针对一个窗口发起的ws链接
    ++peopleCounts
    let uname = ''
    let uColor = require('./methods/util').getColor()

    client.on('disconnect', function (e) {
      --peopleCounts
      io.emit('sys message', {
        data: `系统消息: "${uname}"离开聊天室`,
        counts: peopleCounts
      })
    })

    require('./methods/getNickName')()
      .then(name => {
        uname = name
        io.emit('initUser', {
          name,
          color: uColor
        })
        io.emit('sys message', {
          data: `系统消息: "${name}"进入聊天室`,
          counts: peopleCounts
        })
      })
      .catch(e => { console.log(e) })

    client.on('chat message', function (data) {
      io.emit('message from server', data)
    })
  })
  console.log('Example app listening on port 8081!')
})

• 在express服务器搭建成功的回调函数里绑定socket.io，这里的io变量就是表示socket.io的服务端。
• .on方法监听事件，这些事件来自建立websocket连接时或者浏览器端主动触发。
• .emit触发事件，前端可以监听这些事件。比如一个客户端连接到服务端时，服务端会生成一个随机昵称(getNickName方法非必要)，然后返回给客户端。

客户端部署

import io from 'socket.io-client'
export default {
  name: 'cheatRoom',
  data () {
    return {
      description: '',
      nickName: '',
      counts: 1,
      msg: [],
      color: ''
    }
  },
  created () {
    window.vm = this
    this.initSocket()
  },
  methods: {
    initSocket () {
      const socket = io(this._config().preurl)
      socket.on('connect', () => {
        this.socket = socket
      })
      // 这里api语法类似于jQuery,支持once监听一次,off取消监听
      // [https://socket.io/docs/client-api/#socket-on-eventname-callback](https://socket.io/docs/client-api/#socket-on-eventname-callback)
      socket.once('initUser', ({name, color}) => {
        this.nickName = name
        this.color = color
      })
      socket.on('sys message', ({ data, counts }) => {
        this.counts = counts
        this.msg.push({
          description: data,
          sys: true
        })
      })
      socket.on('message from server', (item) => {
        item.sys = false
        this.msg.push(item)
      })
      socket.on('disconnect', () => {
        this.showAlert({
          msg: '服务端断开连接，请联系管理员Token',
          autoClose: false,
          type: 'error'
        })
      })
    },
    loadAction () {
      let { description, nickName, color } = this
      if (this.description.length === 0) {
        return
      }
      this.socket.emit('chat message', {
        description,
        nickName,
        color
      })
      this.description = ''
    }

• 前端需要用npm安装socket.io-client，不能直接使用原生的websocket语法建立连接。
• 初始化时this._config().preurl是写在配置里的一个url地址，同其他接口地址前缀一样，但是这里的url地址是http协议，也就是说一开始是把一个http协议地址传给的socket.io，然后socket.io在建立http链接之后才升级成的websocket链接。
• on方法，用来监听来自服务端的事件，once表示监听一次，还可以取消监听
• emit触发事件，让服务端响应。这里的loadAction就表示发送信息。

结语

• 整体写法有点像观察者模式，服务端和客户端都是以监听/触发事件的形式完成通信，完全不同于传统的ajax交互方式，十分有趣。