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

（1）很多人估計公司也需要用到聊天，以及音視頻的功能，那么作為萌新的我，當然也是一來公司便得知需要用到這個技術，當時我是懵逼的，因為從來沒接觸過

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

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

但是如果我們只是負責客戶端，看這個就好了，其他你想看一下也可以

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

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

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

（5）當你看完Web通用的下面提供的Web SDK的時候，回到第一個留意下這個東西

你要看看你公司用的是獨立模式還是托管模式，我用的是獨立模式，很坑的就是官方文檔并沒有貼出獨立模式的相關代碼或者例子，就算有也是沒啥用的demo,這個會心態爆炸

（6）關鍵的地方來了，注意官方說的：
說明：如果帳號采用的是獨立模式，開發者需要在自己的服務器調用 TLS API 生成用戶票據，然后調用 ImSdk 提供的接口進行相關操作。

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

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

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

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

你們會不會發現跟網上的提供的不一樣，確實，這個東西找了很久，有些人如果按照官方給的那種方案也就是下面這種本地引入：


進行引入的話，控制臺會出現報錯，會警告你什么UPXX Token < 這種類型的報錯，我也忘記啥了，反正我之前按照官網提供的做法去，就出現這個問題，但是如果按照我這種做法去做的話，一般沒問題，個人感覺良好，哈哈哈哈哈~當你看到沒報錯的時候別提多開心了

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

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

（11）接下來我們來點擊 登錄（web sdk）那一欄， 了解一下是怎么進行登錄IM系統的

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

我們來看第一個參數loginInfo

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

這些參數，通過自己的后臺，也就是服務器端提供的IM接口去獲取，當然這些參數都是必須的，除了有特殊說明，就是選填的，那么就不用寫進去了

（12）我們來看第一個參數listeners

這里參數很多，但是具體的還得看你們怎么用
我用的是這兩個：

選這兩個的原因是：項目需要，也就是類似于聊天一樣，別人發信息過來，你可以監聽到，然后你在監聽到的回調中去做一些你寫的邏輯處理

（13）做到這一步的時候，應該可以進行IM SDK登錄成功了，如果顯示是這樣的，那么就是成功了

忘記了說了一個東西：
isLogOn: false // 是否開啟控制臺打印日志，True-開啟，False-關閉，默認開啟，選填

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

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