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

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

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值