Vue3接入悟空IM实现直播评论互动需求前端即时通讯

🕗 发布于 2024-07-23 20:37 前端即时通讯 websocket 悟空IM

悟空IM官网
 JS文档
 官网Demo

之前用websocket实现过跨端发送和接收任务，不算难。
这次的需求复杂些，需要实现直播的评论互动，改用开源的悟空IM。

安装

npm i wukongimjssdk

引入

import WKSDK from "wukongimjssdk"

通过<script>标签引入使用必须都加前缀 wk, 例如wk.WKSDK.shared()

开发需要的API：

配置

// 集群模式通过此方法获取连接地址
// WKSDK.shared().config.provider.connectAddrCallback = async (callback: ConnectAddrCallback) => {
//     const addr = await xxxx // addr 格式为 ip:port
//     callback(addr)
// }

// 单机模式可以直接设置地址
WKSDK.shared().config.addr = 'ws://IP:PORT'; // 默认端口为5200
// 认证信息
WKSDK.shared().config.uid = 'xxxx'; // 用户uid（需要在悟空通讯端注册过）
WKSDK.shared().config.token = 'xxxx'; // 用户token （需要在悟空通讯端注册过）

连接

// 连接
WKSDK.shared().connectManager.connect();

断开

// 断开
WKSDK.shared().connectManager.disconnect();

监听

// 连接状态监听
WKSDK.shared().connectManager.addConnectStatusListener(
  (status: ConnectStatus, reasonCode?: number) => {
    if (status === ConnectStatus.Connected) {
      console.log('连接成功');
    } else {
      console.log('连接失败', reasonCode); //  reasonCode: 2表示认证失败（uid或token错误）
    }
  },
);

消息发送

/**
  *  发送消息
  * @param content  消息内容
  * @param channel 频道对象 个人频道，群频道
  * @returns 完整消息对象
*/
WKSDK.shared().chatManager.send(content: MessageContent, channel: Channel)


// 案例
// 导入 对应的包
import { MessageText,Channel,WKSDK,ChannelTypePerson,ChannelTypeGroup } from "wukongimjssdk";

// 例如发送文本消息hello给用户u10001
const text = new MessageText("hello") // 文本消息
WKSDK.shared().chatManager.send(text,new Channel("u10001",ChannelTypePerson))

// 例如发送文本消息hello给群频道g10001
WKSDK.shared().chatManager.send(text,new Channel("g10001",ChannelTypeGroup))

发送文本消息

// 文本消息
const msgContent = new MessageText("hello") 

// 发送
WKSDK.shared().chatManager.send(msgContent,channel)

消息监听

监听消息发送状态

const listen =   (packet: SendackPacket) => {
  console.log('消息clientSeq->', packet.clientSeq); // 消息客户端序号用来匹配对应的发送的消息
  if (packet.reasonCode === 1) {
    // 发送成功
  } else {
    // 发送失败
  }
}

添加监听

// 消息发送状态监听
WKSDK.shared().chatManager.addMessageStatusListener(listen);

移除监听

// 消息发送状态监听
WKSDK.shared().chatManager.removeMessageStatusListener(listen)

监听常规消息

const listen =   (message: Message) => {
    message.content // 消息内容
    message.channel // 消息频道
    message.fromUID // 消息发送者
    ....
}

添加监听

WKSDK.shared().chatManager.addMessageListener(listen);

移除监听

WKSDK.shared().chatManager.removeMessageListener(listen)

历史消息

获取某个频道历史消息

const messages = await WKSDK.shared().chatManager.syncMessages(channel, opts)

//opts参数解释
{
    startMessageSeq: number = 0 // 开始消息列号（结果包含startMessageSeq的消息）
    endMessageSeq: number = 0 //  结束消息列号（结果不包含endMessageSeq的消息）0表示不限制
    limit: number = 30 // 每次限制数量
    pullMode: PullMode = PullMode.Down // 拉取模式 0:向下拉取 1:向上拉取
}

//详解
以startMessageSeq为基准 pullMode控制拉取方向，endMessageSeq和limit控制结束位置

------------------ 上拉 ------------------

pullMode为1 表示向上拉，逻辑如下：

消息以startMessageSeq为起点，加载大于或等于startMessageSeq的消息，加载到超过endMessageSeq（结果不包含endMessageSeq）或超过limit为止，如果endMessageSeq为0则以limit为准

例如：
startMessageSeq=100 endMessageSeq=200 limit=10 以limit为准，则返回的messageSeq为100-110的消息.
startMessageSeq=100 endMessageSeq=105 limit=10 以endMessageSeq为准，则返回的messageSeq为100-104的消息
startMessageSeq=100 endMessageSeq=0 limit=10 以limit为准，则返回的messageSeq为100-110的消息

------------------ 下拉 ------------------

pullMode为0 表示向下拉，逻辑如下：

消息以startMessageSeq为起点，加载小于或等于startMessageSeq的消息，加载到超过endMessageSeq（结果不包含endMessageSeq）或超过limit为止，如果endMessageSeq为0则以limit为准

例如：
startMessageSeq=100 endMessageSeq=50 limit=10 以limit为准，则返回的messageSeq为100-91的消息.
startMessageSeq=100 endMessageSeq=95 limit=10 以endMessageSeq为准，则返回的messageSeq为100-96的消息
startMessageSeq=100 endMessageSeq=0 limit=10 以limit为准，则返回的messageSeq为100-91的消息


如果startMessageSeq和endMessageSeq都为0，则不管pullMode为那种都加载最新的limit条消息。

案例

固定频道，可以顺利实现消息发送与监听其他用户发送的消息，其他根据需求自己定义

<template>
    <van-field v-model="review" placeholder="说点什么吧~"  @keyup.enter="addReview"/>
</template>               
import {MessageText,Channel,WKSDK,ChannelTypePerson,ChannelTypeGroup,ConnectStatus} from "wukongimjssdk"
onMounted(() => {
    initWukongIM();
});

const review = ref('') 
const reviewList = ref([
    {title:'用户名A',type:3,content:'进入直播间'},
    {title:'系统提示',type:2,content:'互动评论须严格遵守直播规范，严谨传播赌博等非法内容，和谐团结友爱。'},
    {title:'直播公告',type:1,content:'每天晚上7:00直播（周一休息哦~）'},
]);

//新增评论
const addReview = ()=>{
    if(review.value=='')return;
    sendMessage(review.value)
}


const IMChannel = '123456'
async function  initWukongIM () {
    WKSDK.shared().config.addr = 'ws://60.191.221.232:5200'; // 默认端口为5200  后端联调的地址  自己定义
    WKSDK.shared().config.uid = '111'; // 用户uid（需要在悟空通讯端注册过）
    WKSDK.shared().config.token = '111'; // 用户token （需要在悟空通讯端注册过）
    // 连接
    try {
        WKSDK.shared().connectManager.connect();
    } catch (error) {
        console.log('error',error);
    }
    

    // 连接状态监听
    WKSDK.shared().connectManager.addConnectStatusListener(
        async (status, reasonCode) => {
            if (status === ConnectStatus.Connected) {
                console.log('连接成功');
            } else {
                console.log('连接失败', reasonCode); //  reasonCode: 2表示认证失败（uid或token错误）
            }
        },
    );


    // 本地消息发送状态监听
    const MessageStatusListener = (packet) => {
    console.log('消息clientSeq->', packet.clientSeq); // 消息客户端序号用来匹配对应的发送的消息
        if (packet.reasonCode === 1) {
            console.log('发送成功')
            review.value = ''; // 自己绑定的输入框文本
        } else {
            console.log('发送失败')
        }
    }
    WKSDK.shared().chatManager.addMessageStatusListener(MessageStatusListener);


    //远程消息发送状态监听
    const MessageListener = (message) => {
        message.channel // 消息频道
        message.fromUID // 消息发送者
        message.content // 消息内容
        console.log('消息频道:',message.channel,'消息发送者:',message.fromUID,'消息内容:',message.content);
        if (message.channel?.channelID == IMChannel) {
            reviewList.value.unshift({title:message.fromUID,content:message.content.text,type:4})  //  自己定义的消息列表
        }
    }
    WKSDK.shared().chatManager.addMessageListener(MessageListener);
}


// 发消息
function sendMessage(content) {
    const text = new MessageText(content) // 文本消息
    WKSDK.shared().chatManager.send(text,new Channel(IMChannel,ChannelTypeGroup))// 例如发送文本消息hello给群频道g10001
}

// 断开
function disconnect() {
    WKSDK.shared().connectManager.disconnect();
    // 移除消息发送状态监听 
    WKSDK.shared().chatManager.removeMessageStatusListener(MessageStatusListener)
    // 移除远程消息发送状态监听
    WKSDK.shared().chatManager.removeMessageListener(MessageListener)
    // 移除订阅者监听
    WKSDK.shared().channelManager.removeSubscriberChangeListener(listenChannelMember)
}

原文地址：https://blog.csdn.net/Beatingworldline/article/details/140485444

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：基于镜像导出导入（save导出，load导入命令）
下一篇：webStorm 实时模板笔记

【学习日记】notebook添加JAVA支持
作者是个大学生这个专栏主要收集课时常用的软件以及女朋友上课用的软件的教程。需提前配置好java环境本篇仅对添加支持进行说明。新开了gitcode 用于上传安装包。解压进入解压后目录复制文件地
阅读更多2024-11-15
Docker与Podman全面比较
Docker和Podman作为两大容器引擎，各自拥有独特的特点和优势。本文将从溯源、特点、技术优势、应用实例和技术前景等方面对Docker和Podman进行全面比较。
阅读更多2024-11-15
算法学习blog：day2 继续记日记
4. 明日计划：至少五道题，并且要学会并实现今天的三道题，看这五道题的思路解法，下一天进行实现优化。除此之外pdf粗略看到了20页，明天继续看，后面才是重点。1.做了三道PAT 76，77，78，差一
阅读更多2024-11-15
基于Python的网上银行综合管理系统
【2025最新】基于python+django+vue+MySQL的网上银行综合管理系统，前后端分离。
阅读更多2024-11-15
自定义注解+拦截器+jwtFilter实现权限控制
GetterSUPER_ADMIN(1, "超级管理员"),SYSTEM_ADMIN(2, "系统管理员"),DOMESTIC_CONSUMER(3, &quo
阅读更多2024-11-15
前端面试题整理-vue指令开发
在 bind 钩子中，我为绑定的元素添加了一个点击事件监听器，当元素被点击时，执行复制操作。我当时在开发点击复制文本的功能，我有很多个元素都想有这个功能，但是我又不想每个元素都绑定一个 onClick
阅读更多2024-11-15
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
阅读更多2024-11-15
GESP4级考试语法知识（贪心算法（四））
GESP4级考试语法知识（贪心算法（四））
阅读更多2024-11-15
20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速
创建一个eth0配置文件，配置文件的路径为：/etc/network/interfaces.d/eth0,设置动态ip的配置文件。虽然飞凌的OK3588-C的核心板使用的是千兆网卡RTL8211
阅读更多2024-11-15
【EmbeddedGUI】脏矩阵设计说明
脏矩阵设计说明
阅读更多2024-11-15

Vue3接入悟空IM实现直播评论互动需求 前端即时通讯

安装

引入

开发需要的API：

配置

连接

断开

监听

消息发送

发送文本消息

消息监听

历史消息

案例

相关文章

Vue3接入悟空IM实现直播评论互动需求前端即时通讯