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

Posted 2020-12-28 Ethan

一、基于web端的实时通讯，我们都知道有websocket，为了快速开发，本项目我们采用socket.io（客户端使用socket.io-client）

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‘);

二、socket.io和express链接

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‘)
})

三、使用socket.io

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
      //........
    })

以上就是socket.io配合express的使用，下面我们就来看看类似微信等实时聊天的社交软件的聊天模型是怎么设计的