Vol. 5

聊天室不同于單聊和群聊，是一類(lèi)集成了多種?IM 功能一體的大規(guī)模實(shí)時(shí)消息分發(fā)系統(tǒng)。在跨入新世紀(jì)的2000年，聊天室作為新型的即時(shí)通訊場(chǎng)景迅速在年輕人群體中火熱起來(lái)，“網(wǎng)易聊天室”“碧海銀沙”引領(lǐng)了當(dāng)時(shí)語(yǔ)音聊天的熱潮。

時(shí)至今日，聊天室的勢(shì)頭也不減當(dāng)年，廣泛運(yùn)用于在線 KTV 、連麥開(kāi)黑、主播 PK 、在線秀場(chǎng)等場(chǎng)景，還具備文本、表情、點(diǎn)贊、撒花等互動(dòng)方式，架起溝通橋梁的同時(shí)，玩法也更加多變。

本期云信小課堂就教大家如何快速集成聊天室，并實(shí)現(xiàn)進(jìn)出聊天室、簡(jiǎn)單的消息收發(fā)、權(quán)限管理等功能。

視頻講解

8分鐘視頻，手把手教你接入

集成聊天室-基礎(chǔ)篇

?Step 1 初始化并進(jìn)入聊天室

進(jìn)入聊天室可以有兩種方式：以獨(dú)立模式進(jìn)入聊天室和非獨(dú)立模式進(jìn)入聊天室。

• 獨(dú)立模式是指在 IM 處于未登錄的情況下，進(jìn)入聊天室的方式，針對(duì)只需要聊天室功能的業(yè)務(wù)場(chǎng)景。請(qǐng)引入 NIM_Web_Chatroom_*.js ，并通過(guò) Chatroom.getInstance({...}) 來(lái)初始化聊天室實(shí)例。

• 非獨(dú)立模式是指先完成 IM 登錄，再進(jìn)入聊天室的方式，針對(duì)需要 IM 和聊天室功能的業(yè)務(wù)場(chǎng)景。請(qǐng)引入 NIM_Web_SDK_*.js ，并請(qǐng)通過(guò)? SDK.NIM.getInstance({...}) 和 SDK.Chatroom.getInstance({...}) 來(lái)分別初始化 IM 和聊天室的實(shí)例。

這里為了方便演示，選擇獨(dú)立模式：

//引入SDK，import/require引入的方式可以參考官方文檔 <script src="NIM_Web_Chatroom_*.js">// 非匿名方式登錄（可以演示收發(fā)消息）； //此接口為單例模式, 對(duì)于同一個(gè)賬號(hào), 永遠(yuǎn)返回同一份實(shí)例, 即只有第一次調(diào)用會(huì)初始化一個(gè)實(shí)例 var chatroom = Chatroom.getInstance({appKey: 'appKey', //在云信管理后臺(tái)查看應(yīng)用的 appKeyaccount: 'account', //帳號(hào)，應(yīng)用內(nèi)唯一token: 'token', //通過(guò)服務(wù)器API創(chuàng)建IM賬號(hào)時(shí)獲取chatroomId: 'chatroomId', //聊天室 id，通過(guò)服務(wù)端API https://api.netease.im/nimserver/chatroom/create.action創(chuàng)建chatroomAddresses: [ //聊天室地址，通過(guò)服務(wù)端API https://api.netease.im/nimserver/chatroom/requestAddr.action 獲取'address1','address2'],onconnect: onChatroomConnect,onerror: onChatroomError,onwillreconnect: onChatroomWillReconnect,ondisconnect: onChatroomDisconnect,// 收到消息的回調(diào), 會(huì)傳入消息數(shù)組，這個(gè)會(huì)是高頻使用的回調(diào)onmsgs: onChatroomMsgs }); function onChatroomConnect(obj) {console.log('進(jìn)入聊天室', obj);// 連接建立后的回調(diào)，表示已成功進(jìn)入聊天室，這個(gè)時(shí)候才能去發(fā)消息 } function onChatroomWillReconnect(obj) {// 此時(shí)說(shuō)明 `SDK` 已經(jīng)斷開(kāi)連接, 請(qǐng)開(kāi)發(fā)者在界面上提示用戶連接已斷開(kāi), 而且正在重新建立連接console.log('即將重連', obj); } function onChatroomDisconnect(error) {// 此時(shí)說(shuō)明 `SDK` 處于斷開(kāi)狀態(tài), 開(kāi)發(fā)者此時(shí)應(yīng)該根據(jù)錯(cuò)誤碼提示相應(yīng)的錯(cuò)誤信息, 并且跳轉(zhuǎn)到登錄頁(yè)面console.log('連接斷開(kāi)', error);if (error) {switch (error.code) {// 賬號(hào)或者密碼錯(cuò)誤, 請(qǐng)?zhí)D(zhuǎn)到登錄頁(yè)面并提示錯(cuò)誤case 302:break;// 被踢, 請(qǐng)?zhí)崾惧e(cuò)誤后跳轉(zhuǎn)到登錄頁(yè)面case 'kicked':break;default:break;}} } function onChatroomError(error, obj) {console.log('發(fā)生錯(cuò)誤', error, obj); } function onChatroomMsgs(msgs) {console.log('收到聊天室消息', msgs); }

?Step 2 收發(fā)消息

進(jìn)入聊天室成功后才能發(fā)送/接受消息：

//發(fā)送消息 var msg = chatroom.sendText({text: 'hello',done: sendChatroomMsgDone }); console.log('正在發(fā)送聊天室text消息, id=' + msg.idClient); function sendChatroomMsgDone(error, msg) {console.log('發(fā)送聊天室' + msg.type + '消息' + (!error?'成功':'失敗') + ', id=' + msg.idClient, error, msg);//發(fā)送成功后，聊天室其他人會(huì)收到onmsgs的回調(diào)； }//接收普通消息和通知消息，通過(guò)初始化時(shí)注冊(cè)的回調(diào)onmsgs來(lái)接收消息 function onChatroomMsgs(msgs) {console.log('收到聊天室消息', msgs); }

Step 3 權(quán)限管理

聊天室成員管理和聊天室信息查詢：

//設(shè)置管理員權(quán)限，只有聊天室創(chuàng)建者才有權(quán)限 var Manager = chatroom.markChatroomManager({account: 'account', //需要設(shè)置為管理員的accidisAdd: true,done: markChatroomManagerDone }); function markChatroomManagerDone(error, obj) {console.log('添加聊天室管理員' + (!error?'成功':'失敗'), error, obj.member); }//設(shè)置禁言，只有管理員和聊天室創(chuàng)建者有這個(gè)權(quán)限 var Gaglist = chatroom.markChatroomGaglist({account: 'account',//需要禁言的accidisAdd: true,done: markChatroomGaglistDone }); function markChatroomGaglistDone(error, obj) {console.log('添加聊天室禁言名單' + (!error?'成功':'失敗'), error, obj.member); }//設(shè)置黑名單，只有管理員和聊天室創(chuàng)建者有這個(gè)權(quán)限 var Blacklist = chatroom.markChatroomBlacklist({account: 'account', //需要拉黑的accidisAdd: true,done: markChatroomBlacklistDone }); function markChatroomBlacklistDone(error, obj) {console.log('添加聊天室黑名單' + (!error?'成功':'失敗'), error, obj.member); }//聊天室信息查詢，可以查詢到當(dāng)前聊天室在線人數(shù)onlineMemberNum var roomInfo = chatroom.getChatroom({done: getChatroomDone }); function getChatroomDone(error, obj) {console.log('獲取聊天室信息' + (!error?'成功':'失敗'), error, obj); }

?Step 4 離開(kāi)聊天室

離開(kāi)或切換聊天室：

// 離開(kāi)聊天室，在收到進(jìn)入聊天室成功的回調(diào)后就可以調(diào)用disconnect來(lái)退出聊天室 chatroom.disconnect()// 切換聊天室，先斷開(kāi)聊天室再更新token然后重新連接 chatroom.disconnect() //斷開(kāi)聊天室 chatroom.setOptions({ // 更新 token，參數(shù)列表和格式跟Chatroom.getInstance保持一致token: 'newToken' }); chatroom.connect()?//?重新連接

集成聊天室-Demo篇

?Step 1 下載 Demo

Demo 鏈接：

https://github.com/netease-kit/NIM_Web_Demo，下載到本地，解壓后通過(guò) IDE 打開(kāi)，下載期間，率先獲取 APP_KEY ；

如何獲取 APP_KEY ？

如果已經(jīng)是網(wǎng)易云信開(kāi)發(fā)者，可以直接從網(wǎng)易云信的控制后臺(tái)獲取 APP_KEY ；

如果是第一次體驗(yàn)，則需要前往網(wǎng)易云信官網(wǎng)（http://163.lu/f04GM3）注冊(cè)云信賬號(hào)-創(chuàng)建應(yīng)用-點(diǎn)擊 App_Key 管理即可獲取相關(guān)信息。

?Step 2 運(yùn)行 Demo

在?

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

里面輸入對(duì)應(yīng)環(huán)境的 APP_KEY ，然后在 Demo 根目錄下執(zhí)行 npm install 和 node app命令。

?Step 3 體驗(yàn) Demo 功能

打開(kāi)

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

體驗(yàn) Demo 功能（建議先登錄賬號(hào)）；

Demo 中實(shí)現(xiàn)收發(fā)消息、禁言、拉黑等相關(guān)功能的代碼在 NIM_Web_Demo-master\webdemo\imNew\chatroom\src\js\link.js 和 room.js 里面，大家可以參考 API 文檔自行補(bǔ)充更多功能。

總結(jié)

以上就是網(wǎng)易云信聊天室解決方案 Demo Web 端接入流程的詳細(xì)解說(shuō)，按照如上步驟就可以輕松完成聊天室的搭建。

任何系統(tǒng)的搭建都不是一蹴而就的，尤其是對(duì)于娛樂(lè)社交產(chǎn)品而言，自研搭建聊天室意味著較高的人力成本、時(shí)間成本和資金成本。而融合通信云服務(wù)專家網(wǎng)易云信所提供的聊天室解決方案，可實(shí)現(xiàn)快速上線，1天即可完成集成工作，輕松應(yīng)對(duì)億級(jí)日活的高并發(fā)場(chǎng)景。網(wǎng)易云信也會(huì)繼續(xù)打磨底層技術(shù)能力、為開(kāi)發(fā)者提供更多簡(jiǎn)單集成，快速接入的音視頻和即時(shí)通訊解決方案。

如果感興趣或者有需求的開(kāi)發(fā)者可以閱讀《技術(shù)干貨|網(wǎng)易云信大規(guī)模聊天室系統(tǒng)架構(gòu)解析》，或點(diǎn)擊閱讀原文，免費(fèi)試用。

云信小課堂推薦閱讀

第一期：如何實(shí)現(xiàn)音視頻通話

第二期：5步構(gòu)建本土「Clubhouse」

第三期：5分鐘實(shí)現(xiàn)安卓端PK連麥場(chǎng)景

第四期:5分鐘快速實(shí)現(xiàn)iOS端PK連麥場(chǎng)景

關(guān)于網(wǎng)易云信

網(wǎng)易云信是集網(wǎng)易21年IM以及音視頻技術(shù)打造的融合通信云服務(wù)專家，穩(wěn)定易用的通信與視頻 PaaS 平臺(tái)。

提供融合通信與視頻的核心能力與組件，包含 IM 即時(shí)通訊、5G 消息平臺(tái)、一鍵登錄、信令、短信與號(hào)碼隱私保護(hù)等通信服務(wù)，音視頻通話、直播、點(diǎn)播、互動(dòng)直播與互動(dòng)白板等音視頻服務(wù)，視頻會(huì)議等組件服務(wù)。

網(wǎng)易云信服務(wù)于網(wǎng)易云音樂(lè)、好未來(lái)、新東方、科大訊飛、南京銀行等各行各業(yè)客戶，已有100w+ 企業(yè)開(kāi)發(fā)者接入云信服務(wù)。

總結(jié)

以上是生活随笔為你收集整理的从0搭建在线聊天室，只需4步！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。