1、申請環信賬號? ?環信通訊云

2、此文章只講 聊天室內容

3、創建連接

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、添加回調函數（此數據非常重要，之后的聊天交互全在這里）

conn.listen({onOpened: function () {}, //連接成功回調 onClosed: function () {}, //連接關閉回調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 ) {}, //處理“廣播”或“發布-訂閱”消息，如聯系人訂閱請求、處理群組、聊天室被踢解散等消息onRoster: function ( message ) {}, //處理好友申請onInviteMessage: function ( message ) {}, //處理群組邀請onOnline: function () {}, //本機網絡連接成功onOffline: function () {}, //本機網絡掉線onError: function ( message ) {}, //失敗回調onBlacklistUpdate: function (list) { //黑名單變動// 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調這個函數，list則是黑名單現有的所有好友信息console.log(list);},onRecallMessage: function(message){}, //收到撤回消息回調onReceivedMessage: function(message){}, //收到消息送達服務器回執onDeliveredMessage: function(message){}, //收到消息送達客戶端回執onReadMessage: function(message){}, //收到消息已讀回執onCreateGroup: function(message){}, //創建群組成功回執（需調用createGroupNew）onMutedMessage: function(message){}, //如果用戶在A群組被禁言，在A群發消息會走這個回調并且消息不會傳遞給群其它成員onChannelMessage: function(message){} //收到整個會話已讀的回執，在對方發送channel ack時會在這個回調里收到消息 });

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個字節！')}else{console.log('用戶名不合法！')}} else if (errorData.error === 'unauthorized') {console.log('注冊失敗，無權限！')} else if (errorData.error === 'resource_limited') {console.log('您的App用戶注冊數量已達上限,請升級至企業版！')}}, }; conn.registerUser(options);

6、登錄

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

7、進入聊天室（創建聊天室需要有管理員權限，這一步可以通過在后臺進行管理）

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

8、發送消息（接收內容查看第四步）

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

9、聊天室事件監聽

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':// 轉讓聊天室break;case 'leaveChatRoom':// 退出聊天室break;case 'memberJoinChatRoomSuccess':// 加入聊天室break;case 'leave':// 退出群break;case 'join':// 加入群break;default:break;}} })

10、總結

以上步驟可以滿足大部分需求如果需要其他聊天室的內容可以去看官網文檔?聊天室 開發文檔

也可以參考這個??環信git

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。