2小时做了个聊天室应用,我成了公司的团宠(附代码)

news2024/7/6 20:01:32

我,一个普通程序员,突然成了团宠,背后藏着什么秘密?

事情起源于一次公司活动,那是一个阳光明媚的下午,公司组织了一次户外团建。大家在群里讨论活动信息,刚开始,大家的热情高涨,但问题很快出现,不是有同事没有进群造成信息缺失,就是有各种话题和闲聊淹没关键信息,我意识到,我们需要一个更有效的沟通工具。

我坐在草地上,突然灵光一闪:为什么不自己做一个聊天室应用呢?

聊天室跟群聊不同,它可以自由进出,有聊天记录上下文,不需要接受邀请、群管理等一系列繁琐的动作。并且提供多个话题聊天室,比如“团建策划”、“户外探险”、“美食分享”等,大家随进随出讨论聚焦话题点,这样也不会被其他无关的信息干扰,每个人都能在自己感兴趣的话题上畅所欲言。如今在KTV、连麦开黑、主播PK、在线秀场、团建等场景应用非常广泛。

说干就干,于是我找到网易云信的 IM 即时通讯SDK,快速做了一套在线聊天室,大家聊完即走,没有信息过载负担,也瞬间被同事另眼相看,快来看看我是怎么搭建的吧!

Step 1 开发前的准备

着手开发之前,我们需要先获取 APP_KEY,如果已经是网易云信开发者,可以直接从网易云信的控制后台获取 APP_KEY ;如果是第一次体验,则需要前往网易云信官网注册云信账号-创建应用-点击 App_Key 管理即可获取相关信息。

Step 2 选择聊天室模式

进入聊天室可以有两种方式:独立模式进入聊天室、非独立模式进入聊天室。

  • 独立模式:指在 IM 处于未登录的情况下,进入聊天室的方式,针对只需要聊天室功能的业务场景。
  • 非独立模式:指先完成 IM 登录,再进入聊天室的方式,针对需要 IM 和聊天室功能的业务场景。

本次为了方便演示,选择独立模式。

Step 3:初始化并进入聊天室

接着,我们需要创建聊天室实例,配置必要的登录凭证和事件处理函数,实现用户加入聊天室的基本流程。从而让你能够控制和管理一个聊天室的连接状态,同时处理进入和退出聊天室的事件。

import V2NIMChatroomClient from 'nim-web-sdk-ng/dist/v2/CHATROOM_BROWSER_SDK'
import { DebugLevel, V2NIMChatroomStatus } from 'nim-web-sdk-ng/dist/v2/CHATROOM_BROWSER_SDK/V2NIMChatroomService'

// 创建一个聊天室实例
const chatroom = V2NIMChatroomClient.newInstance({
    appkey: 'YOUR_APPKEY',
    // DebugLevel.debug ==> 'debug'
    debugLevel: DebugLevel.debug
})

chatroom.on('onChatroomStatus', onChatroomStatus)
chatroom.on('onChatroomEntered', onChatroomEntered)
chatroom.on('onChatroomExited', onChatroomExited)

await chatroom.enter('YOUR_ROOM_ID', {
    accountId: 'YOUR_ACCOUNT_ID',
    token: 'YOUR_TOKEN',
    linkProvider: async function() {
        return ['CHATROOM_LINK_ADDRESS']
    }
})

// 定义连接成功时的操作
function onChatroomStatus(status: V2NIMChatroomStatus, error) {
    if (error) {
         console.error('onChatroomStatus Error', status, error)       
    }
    switch(status) {
        // 0
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_DISCONNECTED:
            console.log('聊天室断开连接')
        // 1
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_WAITING:
            console.log('聊天室等待重连')
        // 2
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_CONNECTING:
            console.log('聊天室正在连接')
        // 3
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_CONNECTED:
            console.log('聊天室已连接')
        // 4
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_ENTERING:
            console.log('聊天室进入中')
        // 5
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_ENTERED:
            console.log('聊天室已进入')
        // 6
        case V2NIMChatroomStatus.V2NIM_CHATROOM_STATUS_EXITED:
            console.log('聊天室已退出')                                                                            
    }
}

function onChatroomEntered() {
    // 第一次进入聊天室时触发此事件,后续重连进入不触发
    console.log('进入聊天室')
}

function onChatroomExited() {
    // 已经进入过聊天室后,再离开聊天室,会触发此事件
     console.log('离开聊天室')   
}

Step 4:收发消息

初始化完成后,我们将进行核心的操作,实现在聊天室内发送文本消息,并接收来自聊天室的消息。

发送消息时,可以通过sendText方法将用户的文本信息传递给聊天室中的其他成员。接收消息则通过注册的onmsgs回调函数来实现,确保不错过任何一条消息,具体代码示例如下:

// 接收消息,此函数应该在 enter 之前调用
chatroom.V2NIMChatroomService.on('onReceiveMessages', onReceiveMessages)

function onReceiveMessages(messages) {
    console.log('onReceiveMessages', onReceiveMessages)
}

// 1. 创建消息
// 2. 发送消息
const message = chatroom.V2NIMChatroomMessageCreator.createTextMessage(
"text content");
await chatroom.V2NIMChatroomService.sendMessage(
    message,
    // V2NIMSendChatroomMessageParams
    {
        locationInfo: {x: 0, y: 100, z: 0}
    }
)

Step 5:权限管理

对聊天室内的成员进行权限控制也是必要功能,包括了设置管理员、禁言和拉黑功能。

管理员可以进行更多的管理操作,如设置其他管理员、禁言或拉黑成员。禁言功能可以阻止特定成员在聊天室内发言,而拉黑则可以禁止特定成员加入聊天室。

import { V2NIMChatroomMemberRole } from 'nim-web-sdk-ng/dist/v2/CHATROOM_BROWSER_SDK/V2NIMChatroomMemberService'

// 设置管理员权限,赋予指定账号管理聊天室的权限,只有聊天室创建者有此权限
await chatroom.V2NIMChatroomService.updateMemberRole('account', {
    // 设置为管理员
    memberRole: V2NIMChatroomMemberRole.V2NIM_CHATROOM_MEMBER_ROLE_MANAGER,
})

// 设置禁言名单,管理员或聊天室创建者可以禁止某账号在聊天室发言
await chatroom.V2NIMChatroomService.setMemberChatBannedStatus('account', true, 'extension')

// 设置黑名单,管理员或聊天室创建者可以阻止某账号加入聊天室
await chatroom.V2NIMChatroomService.setMemberBlockedStatus('account', true, 'extension')

// 查询聊天室信息,如获取当前聊天室内的在线人数
const chatroomInfo = chatroom.getChatroomInfo()
console.log('获取聊天室信息: ', chatroomInfo)

Step 6:离开聊天室

允许用户主动离开当前聊天室或在需要时切换到另一个聊天室。通过disconnect方法可以断开与当前聊天室的连接,而通过setOptions更新登录凭证和connect重新建立连接,可以实现聊天室的切换。

// 离开聊天室,在收到进入聊天室成功的回调后,调用 exit 方法来退出聊天室
chatroom.exit()

// 调用 destroyInstance 彻底删除实例
V2NIMChatroomClient.destroyInstance(chatroom.getInstanceId())

OK,按照以上步骤就完成了一个网易云信IM聊天室的搭建,包含了从初始化、消息收发、权限管理到离开聊天室的全过程,怎么样,是不是很简单。这些代码示例不仅提供了基础功能,还可以根据实际应用场景进行适当的扩展和定制,以满足不同用户的需求。

总结

本文通过一个聊天室的教程演示了IM的一个使用场景,这些不过是IM场景的冰山一角,可以想像,无论是从团建的欢声笑语到紧急会议的紧张气氛,网易云信的IM都能轻松应对,成为你沟通的得力助手。

如果你想要尝试搭建聊天室,或者使用IM即时通讯能力,可以点击网易云信官网,开始你的免费试用之旅。

同时如果你有任何疑问,或者想获取demo源码,都可以点击云信官网,留言咨询:网易云信IM

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1891169.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

利用GPT 将 matlab 内置 bwlookup 函数转C

最近业务需要将 matlab中bwlookup 的转C 这个函数没有现成的m文件参考,内置已经打成库了,所以没有参考源代码 但是它的解释还是很清楚的,可以根据这个来写 Nonlinear filtering using lookup tables - MATLAB bwlookup - MathWorks 中国 A…

甘肃黄米粽子:香甜软糯的塞上美食

甘肃黄米粽子是甘肃地区具有特色的传统美食。黄米粽子选用优质的黄米作为主要原料,黄米相较于糯米,有着独特的谷物香气和口感。在制作过程中,将黄米浸泡一段时间,使其充分吸收水分,变得饱满。馅料方面,通常…

Vue 爬坑

都是基于最新的Vue3版本 "vue": "^3.4.29" 1 vue组建样式设置 <script setup lang"ts"> import HelloWorld from ./components/HelloWorld.vue </script><template><div><a href"https://vitejs.dev" tar…

鸿翼打造企业级AI Agent智能体平台,构建AI +ECM全业务场景

在数字化时代的浪潮中&#xff0c;人工智能技术正以前所未有的速度改变着世界。正如比尔盖茨预言&#xff0c;AI Agent将是人工智能的未来。在这个预言逐渐成为现实的当下&#xff0c;大模型驱动的智能体正在成为推动企业革新的核心动力。 在企业环境中&#xff0c;大语言模型的…

DEX: Scalable Range Indexing on Disaggregated Memory——论文泛读

arXiv Paper 论文阅读笔记整理 问题 内存优化索引[2&#xff0c;3&#xff0c;18&#xff0c;27&#xff0c;42]对于加速OLTP至关重要&#xff0c;但随着数据大小&#xff08;以及索引大小&#xff09;的增长&#xff0c;对内存容量的需求可能会超过单个服务器所能提供的容量…

华为手机改变休眠时间 不让手机动不动黑屏

在手机中找到设置 并打开 在里面找到显示与亮度 并点开 找到并点击休眠操作项 然后就会弹出 多久进入休眠 可以调久一点

机器学习基础概念

1.机器学习定义 2.机器学习工作流程 &#xff08;1&#xff09;数据集 ①一行数据&#xff1a;一个样本 ②一列数据&#xff1a;一个特征 ③目标值&#xff08;标签值&#xff09;&#xff1a;有些数据集有目标值&#xff0c;有些数据集没有。因此数据类型由特征值目标值构成或…

vmware虚拟机增加磁盘容量

概述 当初始分配给虚拟机的磁盘空间不够时&#xff0c;需要从外部的主系统增加配给。 具体操作分为两步&#xff1a;一&#xff1a;通过虚拟机界面添加分配的磁盘配给&#xff1b;二&#xff1a;将新分配的配给给使用起来。 操作 添加磁盘配给 在虚拟机内部添加新分配的配给…

Linux下QT程序启动失败问题排查方法

文章目录 0.问题背景1.程序启动失败常见原因2.排查依赖库问题2.1 依赖库缺失2.2 依赖库加载路径错误2.3 依赖库版本不匹配2.4 QT插件库缺失2.4.1 QT插件库缺失2.4.2 插件库自身的依赖库缺失 2.5 系统基础C库不匹配 3.资源问题3.1 缺少翻译文件3.2 缺少依赖的资源文件3.3 缺少依…

数据库安装

1.选择最下面自定义安装 2.选择x64 3.next 4.完成后next 5.next 6.选择如图&#xff0c;next 7.如图 8.输入密码 9.如图 10.如图 11.安装 12.完成 13.控制面板选择系统和安全 14.选择系统 15.高级系统设置 16.环境变量 17.双击打开path 18.新建 19.输入MySQLbin文件夹路径 20.管…

年互动量破亿,小红书流量新风口趋势研究

当今时代&#xff0c;一个人生活已经成为越来越常见的状态。千瓜数据显示&#xff0c;近一年小红书有关“一人生活”的种草笔记数超百万&#xff0c;预估互动量达亿级&#xff0c;“一人”市场大有可为。 本期&#xff0c;千瓜将探索“一人生活”的新变化&#xff0c;深入分析人…

Modbus RTU协议简介即CRC算法实现

目录 1 Modbus 介绍2 Modbus RTU协议传输方式2.1 地址码2.2 功能码2.3 数据码2.4 校验码 3 CRC算法实现2.1 代码3.2 运行结果 1 Modbus 介绍 Modbus是一种串行通信协议&#xff0c;是Modicon公司&#xff08;现在的施耐德电气 Schneider Electric&#xff09;于1979年为使用可编…

谷粒商城-个人笔记(集群部署篇一)

前言 ​学习视频&#xff1a;​Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强​学习文档&#xff1a; 谷粒商城-个人笔记(基础篇一)谷粒商城-个人笔记(基础篇二)谷粒商城-个人笔记(基础篇三)谷粒商城-个人笔记(高级篇一)谷粒商城-个…

每日一题——力扣144. 二叉树的前序遍历(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法&#xff1a; 代码结构 时间复杂度 空间复杂度 总结 我要更强 代码说明 …

mysql 忘记 root 密码的解决办法(针对不同 mysql 版本)

文章目录 1.前提说明1.1 cmd 窗口打开方式1.2 mysql 服务相关命令知识补充1.3 三个 mysql 版本说明1.4 运行时可能发生的报错问题&#x1f340; 跳过密码授权命令报错&#x1f340; 修改密码时报错&#x1f340; ERROR 2003 (HY000): Cant connect to MySQL server on localhos…

安卓稳定性之crash详解

目录 前言一、Crash 的基本原理二、Crash 分析思路三、实例分析四、预防措施五、参考链接 前言 在开发和测试 Android 应用程序时&#xff0c;遇到应用程序崩溃是很常见的情况。 Android 崩溃指的是应用程序因为异常或错误而无法正常执行&#xff0c;并且导致应用强制关闭。 一…

RabbitMQ 进程内流控(Flow Control) 源码解析

1. 概述 1.1 为什么要流控&#xff1f; 流控主要是为了防止生产者生产消息速度过快&#xff0c;超过 Broker 可以处理的速度。这时需要暂时限制生产者的生产速度&#xff0c;让 Broker 的处理能够跟上生产速度。 Erlang进程之间不共享内存&#xff0c;每个进程都有自己的进程邮…

什么是眼球凹渲染?如何在Varjo Base中设置眼球追踪与凹渲染功能

当谈到Varjo耳机时&#xff0c;它们总是与超高分辨率显示器和有凹渲染联系在一起&#xff0c;从而能够高效地渲染到高像素的显示器上。 本篇博文的主题是分享一些可用于OpenXR应用程序的新设置&#xff0c;但在此之前&#xff0c;让我们先了解关于有凹渲染的一些背景。有凹渲染…

【计算机毕业设计】基于Springboot的B2B平台医疗病历交互系统【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…

Python爬取国家医保平台公开数据

国家医保服务平台数据爬取python爬虫数据爬取医疗公开数据 定点医疗机构查询定点零售药店查询医保机构查询药品分类与代码查询 等等&#xff0c;数据都能爬 接口地址&#xff1a;/ebus/fuwu/api/nthl/api/CommQuery/queryFixedHospital 签名参数&#xff1a;signData {dat…