一个关于vue+mysql+express的全栈项目（五）------ 实时聊天部分socket.io

Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，
非常方便和人性化，而且支持的浏览器最低达IE5.5
socket.io特点:
 实时分析：将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。
 实时通信和聊天：只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
 二进制流传输：从1.0版本开始，Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。
 文档合并：允许多个用户同时编辑一个文档，并且能够看到每个用户做出的修改。

socket.io常用事件:
  // 发送给当前客户端
  socket.emit(‘hello‘, ‘can you hear me?‘, 1, 2, ‘abc‘);
  // 发送给所有客户端，除了发送者
  socket.broadcast.emit(‘broadcast‘, ‘hello friends!‘);
  // 发送给同在 ‘game‘ 房间的所有客户端，除了发送者
  socket.to(‘game‘).emit(‘nice game‘, "let‘s play a game");
  // 发送给同在 ‘game1‘ 或 ‘game2‘ 房间的所有客户端，除了发送者
  socket.to(‘game1‘).to(‘game2‘).emit(‘nice game‘, "let‘s play a game (too)");
  // 发送给同在 ‘game‘ 房间的所有客户端，包括发送者
  io.in(‘game‘).emit(‘big-announcement‘, ‘the game will start soon‘);

const app = express()
//这里需要使用express对socket.io进行包装
const server = require(‘http‘).Server(app)
const io = require(‘socket.io‘)(server)

server.listen(9094, function(){
     console.log(‘Node app start at port 9094‘)
})

1.客户端代码
    1).引入客户端socket.io-client
         import io from ‘socket.io-client‘
    2).链接服务器
        const socket = io(‘ws://localhost:9094‘)
        //ws是websocket的传输协议
    3).在客户端发送一条消息给服务端
        socket.emit(‘sendmsg‘, msg)
        //sendmsg是客户端广播出去的事件，在服务端可以监听到
2.服务端代码
    io.on(‘connection‘, function(socket) {
       //服务端使用socket.on可以监听到客户端发送的事件
       socket.on(‘sendmsg‘, function (data) {
          //这里监听到后，服务端可以告诉客户端自己收到了
          io.emit(‘recvemsg‘, chatmsg)
       })
    })
3.客户端
    socket.on(‘recvemsg‘, function (data) {
      //客户端监听到服务端的recvemsg
      //........
    })