1、申請環(huán)信賬號? ?環(huán)信通訊云

2、此文章只講 聊天室內(nèi)容

3、創(chuàng)建連接

let conn = {}; WebIM.config = config; conn = WebIM.conn = new WebIM.connection({appKey: WebIM.config.appkey,isHttpDNS: WebIM.config.isHttpDNS,isMultiLoginSessions: WebIM.config.isMultiLoginSessions,https: WebIM.config.https,url: WebIM.config.socketServer,apiUrl: WebIM.config.restServer,isAutoLogin: WebIM.config.isAutoLogin,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,delivery: WebIM.config.delivery,useOwnUploadFun: WebIM.config.useOwnUploadFun }) // WebIM.config 為之前集成里介紹的WebIMConfig.js

4、添加回調(diào)函數(shù)（此數(shù)據(jù)非常重要，之后的聊天交互全在這里）

conn.listen({onOpened: function () {}, //連接成功回調(diào) onClosed: function () {}, //連接關(guān)閉回調(diào)onTextMessage: function ( message ) {}, //收到文本消息onEmojiMessage: function ( message ) {}, //收到表情消息onPictureMessage: function ( message ) {}, //收到圖片消息onCmdMessage: function ( message ) {}, //收到命令消息onAudioMessage: function ( message ) {}, //收到音頻消息onLocationMessage: function ( message ) {},//收到位置消息onFileMessage: function ( message ) {}, //收到文件消息onCustomMessage: function ( message ) {}, //收到自定義消息onVideoMessage: function (message) {var node = document.getElementById('privateVideo');var option = {url: message.url,headers: {'Accept': 'audio/mp4'},onFileDownloadComplete: function (response) {var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);node.src = objectURL;},onFileDownloadError: function () {console.log('File down load error.')}};WebIM.utils.download.call(conn, option);}, //收到視頻消息onPresence: function ( message ) {}, //處理“廣播”或“發(fā)布-訂閱”消息，如聯(lián)系人訂閱請求、處理群組、聊天室被踢解散等消息onRoster: function ( message ) {}, //處理好友申請onInviteMessage: function ( message ) {}, //處理群組邀請onOnline: function () {}, //本機(jī)網(wǎng)絡(luò)連接成功onOffline: function () {}, //本機(jī)網(wǎng)絡(luò)掉線onError: function ( message ) {}, //失敗回調(diào)onBlacklistUpdate: function (list) { //黑名單變動// 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調(diào)這個函數(shù)，list則是黑名單現(xiàn)有的所有好友信息console.log(list);},onRecallMessage: function(message){}, //收到撤回消息回調(diào)onReceivedMessage: function(message){}, //收到消息送達(dá)服務(wù)器回執(zhí)onDeliveredMessage: function(message){}, //收到消息送達(dá)客戶端回執(zhí)onReadMessage: function(message){}, //收到消息已讀回執(zhí)onCreateGroup: function(message){}, //創(chuàng)建群組成功回執(zhí)（需調(diào)用createGroupNew）onMutedMessage: function(message){}, //如果用戶在A群組被禁言，在A群發(fā)消息會走這個回調(diào)并且消息不會傳遞給群其它成員onChannelMessage: function(message){} //收到整個會話已讀的回執(zhí)，在對方發(fā)送channel ack時會在這個回調(diào)里收到消息 });

5、注冊 (此步驟可以通過后臺注冊，在前端注冊初始化可能需要時間)

var options = { username: 'username',password: 'password',nickname: 'nickname',appKey: WebIM.config.appkey,success: function () { }, error: function (err) {let errorData = JSON.parse(err.data);if (errorData.error === 'duplicate_unique_property_exists') {console.log('用戶已存在！');} else if (errorData.error === 'illegal_argument') {if (errorData.error_description === 'USERNAME_TOO_LONG') {console.log('用戶名超過64個字節(jié)！')}else{console.log('用戶名不合法！')}} else if (errorData.error === 'unauthorized') {console.log('注冊失敗，無權(quán)限！')} else if (errorData.error === 'resource_limited') {console.log('您的App用戶注冊數(shù)量已達(dá)上限,請升級至企業(yè)版！')}}, }; conn.registerUser(options);

6、登錄

var options = { user: 'username',pwd: 'password',appKey: WebIM.config.appkey }; conn.open(options);

7、進(jìn)入聊天室（創(chuàng)建聊天室需要有管理員權(quán)限，這一步可以通過在后臺進(jìn)行管理）

/*創(chuàng)建聊天室（創(chuàng)建聊天室需要有管理員權(quán)限，這一步可以通過在后臺進(jìn)行管理）*/ let options = {name: 'chatRoomName', // 聊天室名稱description: 'description', // 聊天室描述maxusers: 200, // 聊天室成員最大數(shù)（包括聊天室創(chuàng)建者），默認(rèn)值200，聊天室人數(shù)最大默認(rèn)5000。members: ['user1', 'user2'] // 聊天室成員，此屬性為可選的，但是如果加了此項(xiàng)，數(shù)組元素至少一個 } conn.createChatRoom(options).then((res) => {console.log(res) })//加入聊天室 let options = {roomId: 'roomId', // 聊天室idmessage: 'reason' // 原因（可選參數(shù)） } conn.joinChatRoom(options).then((res) => {console.log(res) })

8、發(fā)送消息（接收內(nèi)容查看第四步）

let options = {roomId: 'roomId', // 聊天室id announcement: 'hello everyone' // 公告內(nèi)容 }; conn.updateChatRoomAnnouncement(options).then((res) => {console.log(res) })

9、聊天室事件監(jiān)聽

conn.listen({onPresence: function(msg){switch(msg.type){case 'rmChatRoomMute':// 解除聊天室一鍵禁言break;case 'muteChatRoom':// 聊天室一鍵禁言break;case 'rmUserFromChatRoomWhiteList':// 刪除聊天室白名單成員break;case 'addUserToChatRoomWhiteList':// 增加聊天室白名單成員break;case 'deleteFile':// 刪除聊天室文件break;case 'uploadFile':// 上傳聊天室文件break;case 'deleteAnnouncement':// 刪除聊天室公告break;case 'updateAnnouncement':// 更新聊天室公告break;case 'removeMute':// 解除禁言break;case 'addMute':// 禁言break;case 'removeAdmin':// 移除管理員break;case 'addAdmin':// 添加管理員break;case 'changeOwner':// 轉(zhuǎn)讓聊天室break;case 'leaveChatRoom':// 退出聊天室break;case 'memberJoinChatRoomSuccess':// 加入聊天室break;case 'leave':// 退出群break;case 'join':// 加入群break;default:break;}} })

10、總結(jié)

以上步驟可以滿足大部分需求如果需要其他聊天室的內(nèi)容可以去看官網(wǎng)文檔?聊天室 開發(fā)文檔

也可以參考這個??環(huán)信git

注釋：建議用web做即時通訊的，在開始的時候先封裝一下 要不然之后做的時候可能越做越亂，剛開始我就踩過這個坑

總結(jié)

以上是生活随笔為你收集整理的环信即时通讯 聊天室、发红包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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