在微信小程序里實現(xiàn)聊天室？

拍拍二手閑置平臺，可以將自己的閑置物品進行轉(zhuǎn)讓或者捐贈。想和賣家達(dá)成共識就需要涉及IM聊天。拍拍二手閑置平臺目前接入的是環(huán)信IM聊天。下面我將從三個階段帶大家玩轉(zhuǎn)環(huán)信IM會話。

前期初識IM聊天帶著問題去調(diào)研必須接入環(huán)信嗎？除了環(huán)信是否可以接入其他即時通信?環(huán)信目前有哪些功能呢？支持微信小程序嗎？如何接入小程序呢？調(diào)研分析必須接入環(huán)信嗎？除了環(huán)信是否可以接入其他即時通信?

現(xiàn)狀: 微信小程序API 提供了WebSocket 方法。擴展: 如果服務(wù)端支持scoket通信,ios\android\H5 也全都支持Im聊天了備注：專業(yè)第三方Im有融云、環(huán)信、云之訊等，底層實現(xiàn)均是基于scoket 通信。明白scoket通信后也可以自己寫即時通信。

環(huán)信目前有哪些功能呢？支持微信小程序嗎？錯誤想法: 環(huán)信就是做im聊天的，咱們上去按照接入文檔，開發(fā)就能搞定！！！

這種想法是很致命的。在所有的第三方組件接入中，如果我們不能跳出來看待問題，只是為了完成任務(wù)而完成任務(wù)。那么我們永遠(yuǎn)是最底層的低級碼農(nóng)。環(huán)信目前是同行業(yè)里面做的算不錯的。那么他的官網(wǎng)、接入規(guī)范都應(yīng)該有的。微信小程序也是支持的。在后面小編會帶領(lǐng)大家一切怎么去閱讀一個官網(wǎng)

如何接入小程序？

接入小程序是否需要申請一個賬號呢？我直接運行他們的demo可以嗎？ 怎么去測試呢? 此時我們可以有很多的猜想。我認(rèn)為在開始接入之前我們應(yīng)該很好的進行一些思考，答案顯而易見。

環(huán)信接入思考篇快即時慢

在工作中，大家會經(jīng)常遇到第三方組件的接入。當(dāng)接收到任務(wù)后，為了盡快完成任務(wù)。上來就google，找攻略，找技巧。往往認(rèn)為這樣做速度是最快的。結(jié)果適得其反，做了很多無用的功。我們意識中的快，結(jié)果卻變成了慢

慢即時快image

逆向思維： 任何一個第三方的組件，特別是一個大點的平臺，他們?yōu)榱送瞥鲎约旱漠a(chǎn)品，一定會有各種各樣的功能支持，接入文檔說明。我們放慢速度，將這些資源用上半天的時間進行簡單的梳理。后期的開發(fā)進度會有很大的提升。上圖是我在接入環(huán)信Im后進行的反思。因為在接入環(huán)信之前，其他團隊成員用了很長的時間聯(lián)調(diào)。假如他們在接入環(huán)信聊天之前，了解環(huán)信擁有自己的后臺，可以直接給用戶端發(fā)送測試消息;可以直接創(chuàng)建用戶、創(chuàng)建聊天室、創(chuàng)建群組。他們還會花費那么久的時間去聯(lián)調(diào)嗎?完全不用依賴服務(wù)端。不用依賴ios，依賴android。自己使用環(huán)信后臺，輕輕松松完成各種測試。

環(huán)信接入

環(huán)信官網(wǎng)注冊自己的即時通訊云，并登陸后臺

image

創(chuàng)建自己的應(yīng)用，并記錄關(guān)鍵信息

image

以下是關(guān)鍵信息哦！！！

image

備注：

應(yīng)用標(biāo)識 應(yīng)用接入時會使用IM 用戶 可以創(chuàng)建、刪除用戶、發(fā)送消息群組 可以創(chuàng)建、刪除群組信息、發(fā)送消息聊天室 可以創(chuàng)建、刪除聊天室、發(fā)送消息tip 通過這個后臺管理系統(tǒng)，就可以玩轉(zhuǎn)環(huán)信的接入測試了。

從環(huán)信下載小程序demo，替換 appkey 進行聯(lián)調(diào)測試

image測試走起

用戶測試 在環(huán)信后臺創(chuàng)建用戶，在小程序端登錄 （用戶demo1 密碼：123456）

image

一對一會話測試① 在環(huán)信后臺創(chuàng)建用戶demo2② 點擊操作，查看用戶好友將demo1和demo2 添加為好友。③ 在小程序端用demo1給demo2發(fā)送測試消息。④ 退出demo1用戶，登錄demo2查看是否會接收到demo1發(fā)送的會話

image

由于環(huán)信工程師們相信碼農(nóng)的實力，在群組測試和聊天室測試這塊為大家留下了想象空間。demo 中群組測試和聊天室測試為明確寫出。讓我繼續(xù)帶大家飛

群組測試① 創(chuàng)建群組記錄群組id，并給群組添加成員（demo2）

image

② 環(huán)信后臺給群組發(fā)送測試消息

image③ 控制臺能收到群組測試消息，怎么展示呢? 請閱讀源碼解析篇聊天室測試① 創(chuàng)建聊天室記錄聊天室id,將demo1 設(shè)置為超級管理員，demo2設(shè)置為管理員② 聊天室這里沒有聊天室消息的發(fā)送。請閱讀源碼解析篇

通過以上4個簡單的測試，android、ios、h5、小程序的聊天測試均可以參照以上4點進行順利的測試。初期就此結(jié)束。下面帶代價進行源碼的解析

中期看源碼前期思考image核心源碼閱讀image

以上是環(huán)信sdk 基礎(chǔ)代碼結(jié)構(gòu)。 通過簡單閱讀會發(fā)現(xiàn)：

環(huán)信的scoket 通信也使用了微信小程序暴露的scoket 通信 （猜想 android、ios 其他端也有對應(yīng)的scoket通信）環(huán)信的api包裝在connection.js 組件中，如果某些api沒有，咱們可以擴展connection 中的方法

環(huán)信核心代碼閱讀完成后，發(fā)現(xiàn)沒有涉及到緩存。看來緩存的處理是在對應(yīng)的業(yè)務(wù)邏輯中。

設(shè)想：

消息應(yīng)該在哪里緩存哪里進行會話鏈接的監(jiān)聽注冊環(huán)信demo 代碼閱讀會話、群組

通過前面提到的方式，大家可以在小程序控制臺抓取到用戶收到的會話和群組消息

會話

app.js

環(huán)信scoket 注冊監(jiān)聽代碼在app.js 中核心代碼如下：

實際開發(fā)過程中，在微信中，退出小程序，重新進入時，webscoket 通信并沒有重新創(chuàng)建鏈接。存在用戶收到不到消息的情況。可以將以上代碼封裝，例如addHXLIstener(...)。當(dāng)用戶重新打開后，再次注冊環(huán)信監(jiān)聽即可。拍拍二手閑置交易平臺，主要集成的是文本聊天功能。

環(huán)信登錄 例如 initLoginHX();

chat 會話

環(huán)信的會話列表存儲在本地，并沒有調(diào)用服務(wù)器端數(shù)據(jù)

通過以上代碼得出結(jié)論： 環(huán)信的會話是通過遍歷用戶id+對方id 構(gòu)成的數(shù)據(jù)。

那群組和聊天室的怎么處理呢？環(huán)信小程序demo中只提供了聊天室列表的獲取接口我們可以輕松實現(xiàn)聊天室列表，并沒有提供群組列表的獲取方式。我們需要在conection中擴展調(diào)用群組列表的接口，來實現(xiàn)群組列表。參照聊天室列表獲取即可實現(xiàn)。聊天室列表實現(xiàn)方式如下：

chatroom

從本地緩存中獲取聊天記錄，并展示

環(huán)信聊天頁面，聊天數(shù)據(jù)全部存儲在緩存當(dāng)中，跟進聊天類型的不同，主要需要調(diào)整緩存的key。詳情如下：

單對單聊天 對方uin+自己的uin群組聊天（針對某個商品，不需要好友關(guān)系，只需要臨時聊天） 群組id+對方uin+自己的uin聊天室（同群組聊天）問題大雜燴群組聊天緩存如何存儲？

答： 緩存key 設(shè)置為 群組id+對方uin+自己的uin

聊天時，如何在聊天中攜帶擴展信息

答： 消息內(nèi)容中，ext 支持用戶自定義參數(shù)傳遞

會話列表如何實現(xiàn)？

答： 通過接口獲取環(huán)信的群組列表，通過自己的服務(wù)器端補全對應(yīng)的會話信息。

回顧

整個環(huán)信接入，整體圍繞 假設(shè)-->猜想-->實踐完成的。仔細(xì)閱讀官網(wǎng)，會為大姐節(jié)約很多時間

作者：賈慧斌鏈接：https://www.jianshu.com/p/8919316d26b8來源：簡書簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。