2小时做了个聊天室应用，我成了公司的团宠（附代码）

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

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

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

聊天室跟群聊不同，它可以自由进出，有聊天记录上下文，不需要接受邀请、群管理等一系列繁琐的动作。并且提供多个话题聊天室，比如“团建策划”、“户外探险”、“美食分享”等，大家随进随出讨论聚焦话题点，这样也不会被其他无关的信息干扰，每个人都能在自己感兴趣的话题上畅所欲言。如今在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