Vol. 5

聊天室不同于单聊和群聊，是一类集成了多种 IM 功能一体的大规模实时消息分发系统。在跨入新世纪的2000年，聊天室作为新型的即时通讯场景迅速在年轻人群体中火热起来，“网易聊天室”“碧海银沙”引领了当时语音聊天的热潮。

时至今日，聊天室的势头也不减当年，广泛运用于在线 KTV 、连麦开黑、主播 PK 、在线秀场等场景，还具备文本、表情、点赞、撒花等互动方式，架起沟通桥梁的同时，玩法也更加多变。

本期云信小课堂就教大家如何快速集成聊天室，并实现进出聊天室、简单的消息收发、权限管理等功能。

视频讲解

8分钟视频，手把手教你接入

集成聊天室-基础篇

 Step 1 初始化并进入聊天室

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

• 独立模式是指在 IM 处于未登录的情况下，进入聊天室的方式，针对只需要聊天室功能的业务场景。请引入 NIM_Web_Chatroom_*.js ，并通过 Chatroom.getInstance({...}) 来初始化聊天室实例。

• 非独立模式是指先完成 IM 登录，再进入聊天室的方式，针对需要 IM 和聊天室功能的业务场景。请引入 NIM_Web_SDK_*.js ，并请通过  SDK.NIM.getInstance({...}) 和 SDK.Chatroom.getInstance({...}) 来分别初始化 IM 和聊天室的实例。

这里为了方便演示，选择独立模式：

//引入SDK，import/require引入的方式可以参考官方文档
<script src="NIM_Web_Chatroom_*.js">// 非匿名方式登录（可以演示收发消息）；
//此接口为单例模式, 对于同一个账号, 永远返回同一份实例, 即只有第一次调用会初始化一个实例
var chatroom = Chatroom.getInstance({appKey: 'appKey',  //在云信管理后台查看应用的 appKeyaccount: 'account',  //帐号，应用内唯一token: 'token',  //通过服务器API创建IM账号时获取chatroomId: 'chatroomId',  //聊天室 id，通过服务端API https://api.netease.im/nimserver/chatroom/create.action创建chatroomAddresses: [       //聊天室地址，通过服务端API https://api.netease.im/nimserver/chatroom/requestAddr.action 获取'address1','address2'],onconnect: onChatroomConnect,onerror: onChatroomError,onwillreconnect: onChatroomWillReconnect,ondisconnect: onChatroomDisconnect,// 收到消息的回调, 会传入消息数组，这个会是高频使用的回调onmsgs: onChatroomMsgs
});
function onChatroomConnect(obj) {console.log('进入聊天室', obj);// 连接建立后的回调，表示已成功进入聊天室，这个时候才能去发消息
}
function onChatroomWillReconnect(obj) {// 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接console.log('即将重连', obj);
}
function onChatroomDisconnect(error) {// 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面console.log('连接断开', error);if (error) {switch (error.code) {// 账号或者密码错误, 请跳转到登录页面并提示错误case 302:break;// 被踢, 请提示错误后跳转到登录页面case 'kicked':break;default:break;}}
}
function onChatroomError(error, obj) {console.log('发生错误', error, obj);
}
function onChatroomMsgs(msgs) {console.log('收到聊天室消息', msgs);
}

 Step 2 收发消息

进入聊天室成功后才能发送/接受消息：

//发送消息
var msg = chatroom.sendText({text: 'hello',done: sendChatroomMsgDone
});
console.log('正在发送聊天室text消息, id=' + msg.idClient);
function sendChatroomMsgDone(error, msg) {console.log('发送聊天室' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient, error, msg);//发送成功后，聊天室其他人会收到onmsgs的回调；
}//接收普通消息和通知消息，通过初始化时注册的回调onmsgs来接收消息
function onChatroomMsgs(msgs) {console.log('收到聊天室消息', msgs);
}

Step 3 权限管理

聊天室成员管理和聊天室信息查询：

//设置管理员权限，只有聊天室创建者才有权限
var Manager = chatroom.markChatroomManager({account: 'account', //需要设置为管理员的accidisAdd: true,done: markChatroomManagerDone
});
function markChatroomManagerDone(error, obj) {console.log('添加聊天室管理员' + (!error?'成功':'失败'), error, obj.member);
}//设置禁言，只有管理员和聊天室创建者有这个权限
var Gaglist = chatroom.markChatroomGaglist({account: 'account',//需要禁言的accidisAdd: true,done: markChatroomGaglistDone
});
function markChatroomGaglistDone(error, obj) {console.log('添加聊天室禁言名单' + (!error?'成功':'失败'), error, obj.member);
}//设置黑名单，只有管理员和聊天室创建者有这个权限
var Blacklist = chatroom.markChatroomBlacklist({account: 'account', //需要拉黑的accidisAdd: true,done: markChatroomBlacklistDone
});
function markChatroomBlacklistDone(error, obj) {console.log('添加聊天室黑名单' + (!error?'成功':'失败'), error, obj.member);
}//聊天室信息查询，可以查询到当前聊天室在线人数onlineMemberNum
var roomInfo = chatroom.getChatroom({done: getChatroomDone
});
function getChatroomDone(error, obj) {console.log('获取聊天室信息' + (!error?'成功':'失败'), error, obj);
}

 Step 4 离开聊天室

离开或切换聊天室：

// 离开聊天室，在收到进入聊天室成功的回调后就可以调用disconnect来退出聊天室
chatroom.disconnect()// 切换聊天室，先断开聊天室再更新token然后重新连接
chatroom.disconnect() //断开聊天室
chatroom.setOptions({ // 更新 token，参数列表和格式跟Chatroom.getInstance保持一致token: 'newToken'
});
chatroom.connect() // 重新连接

集成聊天室-Demo篇

 Step 1 下载 Demo

Demo 链接：

https://github.com/netease-kit/NIM_Web_Demo，下载到本地，解压后通过 IDE 打开，下载期间，率先获取 APP_KEY ；

如何获取 APP_KEY ？

如果已经是网易云信开发者，可以直接从网易云信的控制后台获取 APP_KEY ；

如果是第一次体验，则需要前往网易云信官网（http://163.lu/f04GM3）注册云信账号-创建应用-点击 App_Key 管理即可获取相关信息。

 Step 2 运行 Demo

在

NIM_Web_Demo-master\webdemo\imNew\js\config.js

里面输入对应环境的 APP_KEY ，然后在 Demo 根目录下执行 npm install 和 node app命令。

 Step 3 体验 Demo 功能

打开

http://127.0.0.1:8182/webdemo/imNew/index.html

体验 Demo 功能（建议先登录账号）；

Demo 中实现收发消息、禁言、拉黑等相关功能的代码在 NIM_Web_Demo-master\webdemo\imNew\chatroom\src\js\link.js 和 room.js 里面，大家可以参考 API 文档自行补充更多功能。

总结

以上就是网易云信聊天室解决方案 Demo Web 端接入流程的详细解说，按照如上步骤就可以轻松完成聊天室的搭建。

任何系统的搭建都不是一蹴而就的，尤其是对于娱乐社交产品而言，自研搭建聊天室意味着较高的人力成本、时间成本和资金成本。而融合通信云服务专家网易云信所提供的聊天室解决方案，可实现快速上线，1天即可完成集成工作，轻松应对亿级日活的高并发场景。网易云信也会继续打磨底层技术能力、为开发者提供更多简单集成，快速接入的音视频和即时通讯解决方案。

如果感兴趣或者有需求的开发者可以阅读《技术干货|网易云信大规模聊天室系统架构解析》，或点击阅读原文，免费试用。

云信小课堂推荐阅读

第一期：如何实现音视频通话

第二期：5步构建本土「Clubhouse」

第三期：5分钟实现安卓端PK连麦场景

第四期:5分钟快速实现iOS端PK连麦场景

关于网易云信

网易云信是集网易21年IM以及音视频技术打造的融合通信云服务专家，稳定易用的通信与视频 PaaS 平台。

提供融合通信与视频的核心能力与组件，包含 IM 即时通讯、5G 消息平台、一键登录、信令、短信与号码隐私保护等通信服务，音视频通话、直播、点播、互动直播与互动白板等音视频服务，视频会议等组件服务。

网易云信服务于网易云音乐、好未来、新东方、科大讯飞、南京银行等各行各业客户，已有100w+ 企业开发者接入云信服务。