最近在開發一個業務需求,在小程序項目中增長IM即時通話功能。本次開發使用的是騰訊雲的即時通訊。這裏簡答記錄一下在使用騰訊雲過程當中基本操做。web
基本配置:小程序原生開發 + 騰訊雲(小程序 / WEB端共用通用文檔) 有一個點挺重要:若是是首次使用騰訊雲文檔,必定要過文檔(並且儘量多看幾遍,這很重要,直接決定了你後期的實現方式)。在官方給出的文檔中,小程序端是一個直播間的例子,而當時接到的需求是相似微信溝通這種聊天方式的(會話列表,會話詳情)。
當時跑完了小程序的案例,以爲收穫不大。而web端的例子卻把各個方法涵蓋的比較全面,且往後還能夠配合小程序聯調。
本次作一個簡短的分享,以便總結經驗。小程序
首先按照官方文檔,在項目中引入IM的js文件,一個webim_handler.js是方法文件,一個webim_wx.js是IM接口文檔。微信
而後,在小程序項目中,app.js全局方法中,註冊IM登錄方法,使其在每次進入小程序調用該方法,判斷小程序的登錄態。app
簡單說一下,IM登錄方法調用webim.login(loginInfo, listeners, options,cbOk,cbErr)
。按照官方SDK寫入該方法須要的參數。
這裏主要說一下監聽listeners
消息的幾個主要方法:onMsgNotify() (監聽到新消息時觸發。這個方法基本是必填的,須要注意到是,不包括羣系統消息),在這個方法中觸發小程序的監聽新消息事件,在其業務邏輯相關頁面收到新消息事件觸發,而後在經過SDK方法獲取SessMap。
這裏簡答說一下,SessMap是一個記錄未讀消息的對象(在即時通信功能中很重要哦!),裏面以各個未讀消息id爲key值,其value值爲當前未讀消息的基本信息,好比,當前未讀聯繫人id,暱稱,未讀消息數等。(不瞭解SessMap的同窗應該好好看文檔哦!)code
關於樣式,業務邏輯,各位同窗自行解決了(小程序端在樣式上也有坑,好比使用小程序原生的textarea組件定焦最後一條消息,軟鍵盤彈起等,網上均可以搜到教程,這裏不作敘述)。
當你完成上面步驟時,應該已經實現基本的會話溝通了(即時接展現消息是重點,發送消息比較簡單)。這時,若是你也有會話列表(至關於微信中的「微信」頁),會話詳情(至關於微信中的「聊天」頁)。你會發現會話列表頁中展現的未讀消息計數在從會話詳情頁返回時沒有消息。這就須要在調 webim.setAutoRead(selSess, true, true)
已讀上報接口。在進入會話詳情頁時,調用該接口觸發sessMap中對應key值的清空。cdn
羣聊 (羣系統消息:進羣,退羣,修改羣暱稱需展現在會話詳情頁) 這裏在app.js的im登錄方法中linsters中監聽onGroupSystemNotifys
方法,根據SDK找到適合本身的方法。對象
關於踩坑:未讀計數在小程序點擊膠囊按鈕退出,隱藏到後臺;web端的刷新頁面都會清空sessMap。這裏官方給出的解釋是:通用版(web/ 小程序)SDK沒有作本地存儲。blog
到這裏,一套IM的核心流程已經出爐了。後期在與各自的需求結合到一塊兒就行了。同窗們結合各自業務中跳轉到會話詳情頁後確認好聊天對象基本上就已經完成需求到核心功能了。今日,整理分享出來,方便你們往後查看,節約時間精力。
最後: 謝謝你們閱讀,若是以爲對你有幫助,請給做者一點小小的鼓勵, 點個贊或者收藏吧。 有須要溝通的請聯繫我: 微信( wx9456d) 郵箱( allan_liu986@163.com )
教程