(注意:并非完整代码,此篇博客只展示实现思路与部分关键代码)
喜欢的话,记得点赞、关注,谢谢。
关于socket.io
Socket.IO 是一个开源的 JavaScript 库,可以实现实时通信,特别适用于构建实时应用程序,如消息通讯和多人在线游戏等等。能用于实时通讯的库有很多,其中包括:WebSocket、SignalR Pusher等等,但是socket.io对于消息通讯支持得比较好,所以我们选用soket.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)
}
希望能获得大家的点赞,关注,爱你哦♥!!!