摘要：我個(gè)人覺得騰訊云的文檔，以及一些例子，寫得有點(diǎn)簡(jiǎn)單，并且是用做的，當(dāng)然我只是做的是端，至于其他小程序端，還有其他端那我就不清楚了。

（1）很多人估計(jì)公司也需要用到聊天，以及音視頻的功能，那么作為萌新的我，當(dāng)然也是一來公司便得知需要用到這個(gè)技術(shù)，當(dāng)時(shí)我是懵逼的，因?yàn)閺膩頉]接觸過

（2）從得知這個(gè)消息后，我便開始了網(wǎng)上的各種搜索，百度，google,發(fā)現(xiàn)可以實(shí)現(xiàn)這些的東西的不僅僅除了騰訊云，還有融云等一些東西，我大概了解了一下。我個(gè)人覺得騰訊云的文檔，以及一些例子，寫得有點(diǎn)簡(jiǎn)單，并且是用H5做的，當(dāng)然我只是做的是web端，至于其他小程序端，還有其他端那我就不清楚了。但是，我要怎么集成到vue.js上來呢，并且是自己搭建的腳手架。結(jié)果也是懵逼的，去網(wǎng)上也查不到騰訊云與vue.js相關(guān)東西，這就很頭疼了，那么采坑就開始了，首先，我們先來看看IM的官方文檔：https://cloud.tencent.com/doc...

打開官方文檔，一眼望上去很無奈，怎么那么多

但是如果我們只是負(fù)責(zé)客戶端，看這個(gè)就好了，其他你想看一下也可以

（3）別慌，跟著我一起慢慢看完。

這里顯示那么多種，就得看你公司需求了，我們來看看web通用吧

（4）點(diǎn)進(jìn)去之后，這里有很多文檔的說明，我個(gè)人建議，先瀏覽一遍，你的腦袋才不會(huì)空白，即使看不懂也會(huì)有點(diǎn)印象

（5）當(dāng)你看完Web通用的下面提供的Web SDK的時(shí)候，回到第一個(gè)留意下這個(gè)東西

你要看看你公司用的是獨(dú)立模式還是托管模式，我用的是獨(dú)立模式，很坑的就是官方文檔并沒有貼出獨(dú)立模式的相關(guān)代碼或者例子，就算有也是沒啥用的demo,這個(gè)會(huì)心態(tài)爆炸

（6）關(guān)鍵的地方來了，注意官方說的：
說明：如果帳號(hào)采用的是獨(dú)立模式，開發(fā)者需要在自己的服務(wù)器調(diào)用 TLS API 生成用戶票據(jù)，然后調(diào)用 ImSdk 提供的接口進(jìn)行相關(guān)操作。

（7）由于我這邊的sig是由自己的服務(wù)器在通過騰訊云的服務(wù)器端（這一部分并不是我負(fù)責(zé)，所以不是很清楚）已經(jīng)生成好了票據(jù)，那么我直接去通過接口去拿就行，大概的流程是這樣的：

也就是說，這個(gè)就是獨(dú)立模式登錄的方法，我是直接在登錄騰訊IM系統(tǒng)開始就行，但是你們的話就要根據(jù)具體情況去做了。其實(shí)我也很想去了解服務(wù)器端的sig的生成票據(jù)的方法，但是由于時(shí)間問題，就沒有去了解

（8）好吧，說了這么多，大概的情況你們都了解了吧，看下一點(diǎn)

（9）集成 ImSDK------首先引入 Web SDK：
有人會(huì)問，在vue.js怎么去引入呢，其實(shí)很簡(jiǎn)單，直接index.html中引入就可以了

你們會(huì)不會(huì)發(fā)現(xiàn)跟網(wǎng)上的提供的不一樣，確實(shí)，這個(gè)東西找了很久，有些人如果按照官方給的那種方案也就是下面這種本地引入：


進(jìn)行引入的話，控制臺(tái)會(huì)出現(xiàn)報(bào)錯(cuò)，會(huì)警告你什么UPXX Token < 這種類型的報(bào)錯(cuò)，我也忘記啥了，反正我之前按照官網(wǎng)提供的做法去，就出現(xiàn)這個(gè)問題，但是如果按照我這種做法去做的話，一般沒問題，個(gè)人感覺良好，哈哈哈哈哈~當(dāng)你看到?jīng)]報(bào)錯(cuò)的時(shí)候別提多開心了

（10）好了，引入完之后，接下來我們繼續(xù)看看文檔

這個(gè)有什么用呢? 肯定有用啊，黑字白紙，寫得明明白白。這也就類型嘛，我用的是群會(huì)話

（11）接下來我們來點(diǎn)擊 登錄（web sdk）那一欄， 了解一下是怎么進(jìn)行登錄IM系統(tǒng)的

在這里，只需要注意loginInfo，listeners, 以及一個(gè)成功的回調(diào)跟失敗的回調(diào)，你可以這樣寫

我們來看第一個(gè)參數(shù)loginInfo

我這里用到了里面的參數(shù)，但是加了一個(gè)accountType,這個(gè)accoutType可以作為公司的標(biāo)識(shí)，或者是其他標(biāo)識(shí)，你可以不用這個(gè)字段，但是你想知道這個(gè)字段是干嘛的，你可以去了解一下

這些參數(shù)，通過自己的后臺(tái)，也就是服務(wù)器端提供的IM接口去獲取，當(dāng)然這些參數(shù)都是必須的，除了有特殊說明，就是選填的，那么就不用寫進(jìn)去了

（12）我們來看第一個(gè)參數(shù)listeners

這里參數(shù)很多，但是具體的還得看你們?cè)趺从?br>我用的是這兩個(gè)：

選這兩個(gè)的原因是：項(xiàng)目需要，也就是類似于聊天一樣，別人發(fā)信息過來，你可以監(jiān)聽到，然后你在監(jiān)聽到的回調(diào)中去做一些你寫的邏輯處理

（13）做到這一步的時(shí)候，應(yīng)該可以進(jìn)行IM SDK登錄成功了，如果顯示是這樣的，那么就是成功了

忘記了說了一個(gè)東西：
isLogOn: false // 是否開啟控制臺(tái)打印日志，True-開啟，F(xiàn)alse-關(guān)閉，默認(rèn)開啟，選填

這個(gè)只是用來輔助下自己看看日志，你可以不用去看，看個(gè)人吧~

我也是第一次接觸這個(gè)東西，可能哪里不足的地方，多多指教！