天下雪：新增一個(gè)系列：騰訊云相關(guān)，以便更好的查看跟騰訊云相關(guān)的小程序問(wèn)題 
作者：scnu_lyp，來(lái)自原文地址 
微信小程序從1月9號(hào)面世，到現(xiàn)在才1個(gè)多月，很多相關(guān)資料還不夠完善，下面談?wù)勛约旱睦斫?，希望這篇文章能夠給小程序開發(fā)者一點(diǎn)點(diǎn)幫助。因?yàn)閳F(tuán)隊(duì)開發(fā)需要，用的是騰訊云提供的解決方案Wafer。那里的文檔是寫的比較簡(jiǎn)略的。具體文檔和源碼請(qǐng)移步https://github.com/tencentyun/wafer。

首先，微信小程序解決方案解決的主要問(wèn)題是小程序會(huì)話服務(wù)和的信道服務(wù)問(wèn)題。

1、因?yàn)樾〕绦虿恢С謈ookie會(huì)話服務(wù)需要自己搭建，要理解小程序的會(huì)話服務(wù)，請(qǐng)先讀懂下面這張圖，這十分重要 

而信道服務(wù)問(wèn)題的產(chǎn)生是由于https每個(gè)請(qǐng)求都需要建立一次連接，耗費(fèi)比較多的資源。同時(shí)微信有最大連接數(shù)的限制（5個(gè)），所以實(shí)時(shí)通信的需求不好做，于是我們采用Websocket進(jìn)行通信，這樣整個(gè)過(guò)程只需建立一次連接，同時(shí)可以實(shí)現(xiàn)雙向通信，廣播等功能。同樣也要理解下圖的流程 

騰訊云這次提供的解決方案主要分為兩部分：微信小程序客戶端騰訊云增強(qiáng)SDK和業(yè)務(wù)服務(wù)器端SDK，兩者是相互配合的，下面從分別對(duì)他們的源碼進(jìn)行分析

Ⅰ、微信小程序客戶端騰訊云增強(qiáng)SDK（wafer-client-sdk-master）

在官方提供的小程序demo里面，sdk可以直接安裝到小程序目錄中,使用的時(shí)候直接調(diào)用

1. // 引入 QCloud 小程序增強(qiáng) SDK
2. var qcloud = require('../../vendor/qcloud-weapp-client-sdk/index');

1. 　　　var host = '59431301.qcloud.la';　　//你的服務(wù)器地址
2. 　　　var config = {
3.  
4. // 下面的地址配合云端 Demo 工作
5. service: {
6. host,
7.  
8. // 登錄地址，用于建立會(huì)話
9. loginUrl: `https://${host}/login`,
10.  
11. // 測(cè)試的請(qǐng)求地址，用于測(cè)試會(huì)話
12. requestUrl: `https://${host}/user`,
13.  
14. // 測(cè)試的信道服務(wù)地址
15. tunnelUrl: `https://${host}/tunnel`,
16. }

對(duì)于信道服務(wù)，demo里面提供了很多的方法,這里就不一一贅述了，舉其中一個(gè)例子

1. 　　 /**
2. * 連接到聊天室信道服務(wù)
3. */
4. connect() {
5. this.amendMessage(createSystemMessage('正在加入群聊...'));
6.  
7. // 創(chuàng)建信道
8. var tunnel = this.tunnel = new qcloud.Tunnel(config.service.tunnelUrl);
9.  
10. // 連接成功后，去掉「正在加入群聊」的系統(tǒng)提示
11. tunnel.on('connect', () => this.popMessage());
12.  
13. // 聊天室有人加入或退出，反饋到 UI 上
14. tunnel.on('people', people => {
15. const { total, enter, leave } = people;
16.  
17. if (enter) {
18. this.pushMessage(createSystemMessage(`${enter.nickName}已加入群聊，當(dāng)前共 ${total} 人`));
19. } else {
20. this.pushMessage(createSystemMessage(`${leave.nickName}已退出群聊，當(dāng)前共 ${total} 人`));
21. }
22. });
23.  
24. // 有人說(shuō)話，創(chuàng)建一條消息
25. tunnel.on('speak', speak => {
26. const { word, who } = speak;
27. this.pushMessage(createUserMessage(word, who, who.openId === this.me.openId));
28. });
29.  
30. // 信道關(guān)閉后，顯示退出群聊
31. tunnel.on('close', () => {
32. this.pushMessage(createSystemMessage('您已退出群聊'));
33. });
34.  
35. // 重連提醒
36. tunnel.on('reconnecting', () => {
37. this.pushMessage(createSystemMessage('已斷線，正在重連...'));
38. });
39.  
40. tunnel.on('reconnect', () => {
41. this.amendMessage(createSystemMessage('重連成功'));
42. });
43.  
44. // 打開信道
45. tunnel.open();
46. },

主要思路：先通過(guò)url調(diào)用服務(wù)端的信道服務(wù)初始化一個(gè)信道（該方法定義在vendor/lib/tunnel.js），然后調(diào)用tunnel的on方法進(jìn)行監(jiān)聽事件（定義如下）當(dāng)eventType為對(duì)應(yīng)的內(nèi)置消息類型，觸發(fā)相應(yīng)的方法。

1. 　//=========================================================================
2. // 暴露實(shí)例狀態(tài)以及方法
3. //=========================================================================
4. this.serviceUrl = serviceUrl;
5. this.socketUrl = null;
6. this.status = null;
7.  
8. this.open = openConnect;
9. this.on = registerEventHandler;
10. this.emit = emitMessagePacket;
11. this.close = close;
12.  
13. this.isClosed = isClosed;
14. this.isConnecting = isConnecting;
15. this.isActive = isActive;
16. this.isReconnecting = isReconnecting;