用Socket.io在（vue3+ts）项目中实现聊天功能

（注意：并非完整代码，此篇博客只展示实现思路与部分关键代码）

喜欢的话，记得点赞、关注，谢谢。

关于socket.io

Socket.IO 是一个开源的 JavaScript 库，可以实现实时通信，特别适用于构建实时应用程序，如消息通讯和多人在线游戏等等。能用于实时通讯的库有很多，其中包括：WebSocket、SignalR Pusher等等，但是socket.io对于消息通讯支持得比较好，所以我们选用soket.io。

如果想要了解更多，大家可以进入Socket.io的中文网站上查看。

介绍 | Socket.IO

实现聊天功能的逻辑

主要逻辑如图：

 

socket.io的基本使用

下包

pnpm add socket.io-client

几个基本的api

import io from 'socket.io-client'

const socket = io()
// 不传默认当前服务器域名，开发中传入服务器地址


// 建立连接
socket.io('connect',()=>{})

// 发送消息
socket.emit('发送事件'，'内容')

// 接收消息
socket.on('接收事件','内容')

// 关闭连接
socket.close()

业务实现部分代码：

第一步：

装包，进行socket连接，监听各种信息，卸载并关闭连接

pnpm add socket.io-client

import type { Socket } from 'socket.io-client'
import { io } from 'socket.io-client'
import { onMounted, onUnmounted } from 'vue'
import { baseURL } from '@/utils/request'




let socket: Socket
onUnmounted(() => {
  socket.close()
})
onMounted(async () => {
  // 建立链接，创建 socket.io 实例
  socket = io(baseURL, {
    // 连接附带信息
  })

  socket.on('connect', () => {
    // 建立连接成功
    console.log('connect')
  })

  socket.on('error', (event) => {
    // 错误异常消息
    console.log('error')
  })

  socket.on('disconnect', ()=> {
    // 已经断开连接
    console.log('disconnect')
  })
})

第二步：

处理接收来的历史聊天记录，并渲染到页面上，此处只展示 js代码

  // 聊天记录
  socket.on('chatMsgList', ({ data }: { data: TimeMessages[] }) => {
    // 准备转换常规消息列表
    const arr: Message[] = []
    data.forEach((item, i) => {
      arr.push({
      })
      arr.push(...item.items)
    })
    // 追加到聊天消息列表
    list.value.unshift(...arr)
  })

第三步：

核心对话功能 

A端输入文字，触发事件$emit('send')传出文字，上方聊天页面监听 $on('send')  事件接收文字

获取收信息人的标识；

通过 socket.emit 的 sendChatMsg 发送文字给服务器；

通过 socket.on 的 receiveChatMsg 接收发送成功或者b端发来的消息；

展示消息

底部输入框组件：

import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'send-text', text: string): void
}>()

const text = ref('')

const sendText = () => {
  emit('send-text', text.value)
  text.value = ''
}

聊天室组件，发送信息

<room-action @send-text="sendText" />

const sendText = (text: string) => {
  // 发送信息需要  发送人  收消息人  消息类型  消息内容
  socket.emit('sendChatMsg', {
    from: , // 自己id
    to: , // 对方id
    msgType: , // 消息类型
    msg:  // 消息详情
  })
}

 // 接收消息 在onMounted注册
  socket.on('receiveChatMsg', async (event) => {
    list.value.push(event)
  })

第四步：

展示聊天信息

实现下拉刷新效果，记录每段消息的开始时间，作为下一次请求的开始时间

触发刷新，发送获取聊天记录消息

// 下拉刷新获取聊天记录
const onRefresh = () => {
  socket.emit('getChatMsgList', 20, time.value, route.query.orderId)
}

希望能获得大家的点赞，关注，爱你哦♥！！！