騰訊雲IM-SDK集成（web端）完成IM登陸

一臉懵逼的看着騰訊雲的文檔，完成了所謂的採坑之旅

（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中引入就能夠了

大家會不會發現跟網上的提供的不同，確實，這個東西找了好久，有些人若是按照官方給的那種方案也就是下面這種本地引入：
<!--web im sdk-->
<script type="text/javascript" src="sdk/webim.js"></script>
進行引入的話，控制檯會出現報錯，會警告你什麼UPXX Token < 這種類型的報錯，我也忘記啥了，反正我以前按照官網提供的作法去，就出現這個問題，可是若是按照我這種作法去作的話，通常沒問題，我的感受良好，哈哈哈哈哈~當你看到沒報錯的時候別提多開心了

（10）好了，引入完以後，接下來咱們繼續看看文檔

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

（11）接下來咱們來點擊 登陸（web sdk）那一欄， 瞭解一下是怎麼進行登陸IM系統的

在這裏，只須要注意loginInfo，listeners, 以及一個成功的回調跟失敗的回調，你能夠這樣寫

咱們來看第一個參數loginInfo

我這裏用到了裏面的參數，可是加了一個accountType,這個accoutType能夠做爲公司的標識，或者是其餘標識，你能夠不用這個字段，可是你想知道這個字段是幹嗎的，你能夠去了解一下

這些參數，經過本身的後臺，也就是服務器端提供的IM接口去獲取，固然這些參數都是必須的，除了有特殊說明，就是選填的，那麼就不用寫進去了

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

這裏參數不少，可是具體的還得看大家怎麼用
我用的是這兩個：

選這兩個的緣由是：項目須要，也就是相似於聊天同樣，別人發信息過來，你能夠監聽到，而後你在監聽到的回調中去作一些你寫的邏輯處理

（13）作到這一步的時候，應該能夠進行IM SDK登陸成功了，若是顯示是這樣的，那麼就是成功了

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

這個只是用來輔助下本身看看日誌，你能夠不用去看，看我的吧~

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