您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序WebSocket協(xié)議是什么,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
WebSocket是什么
微信的WebSocket接口和HTML5的WebSocket基本一樣,是HTTP協(xié)議升級來的,做為一個新的Socket在B/S上使用,它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信。
因為這里是做小程序,所以就不對WebSocket的底層和協(xié)議做過多的說明了,只是稍微介紹一下。想了解詳細(xì)的WebSocket可以參考如下:
WebSocket 協(xié)議
WebSocket與Ajax 的選擇
在WebSocket出來之前,實現(xiàn)即時通訊通常使用Ajax來實現(xiàn),而Ajax是通過輪詢的方式進(jìn)行實時數(shù)據(jù)的獲取,輪詢就是在指定的時間間隔內(nèi),進(jìn)行HTTP 請求來獲取數(shù)據(jù),而這種方式會產(chǎn)生一些弊端,一方面產(chǎn)生過多的HTTP請求,占用帶寬,增大服務(wù)器的相應(yīng),浪費(fèi)資源,另一方面,因為不是每一次請求都會有數(shù)據(jù)變化(就像聊天室),所以就會造成請求的利用率低。
而WebSocket正好能夠解決上面的弊端,WebSocket是客戶端與服務(wù)器之前專門建立一條通道,請求也只請求一次,而且可以從同道中實時的獲取服務(wù)器的數(shù)據(jù),所以當(dāng)應(yīng)用到實時的應(yīng)用上時,WebSocket是一個很不錯的選擇。
WebSocket協(xié)議名
WebSocket的鏈接不是以http或https開頭的,而是以ws和wss開頭的,這里需要注意一下。
實例:實時顯示交易信息
這里類似于實時查看股票信息,這里用到了圖表插件wxchart。
wxchart插件地址:
基本說的差不多了,正式開始。
添加stock頁面:
將wxchart.js放入到pages/stock/中。
修改stock.wxml:
stock.js代碼:
// pages/stock/stock.js //加載插件 var wxCharts = require('wxcharts.js'); Page({ data: {}, onLoad: function (options) { //建立連接 wx.connectSocket({ url: "ws://localhost:12345", }) //連接成功 wx.onSocketOpen(function() { wx.sendSocketMessage({ data: 'stock', }) }) //接收數(shù)據(jù) wx.onSocketMessage(function(data) { var objData = JSON.parse(data.data); console.log(data); new wxCharts({ canvasId: 'lineCanvas',//指定canvas的id animation: false, type: 'line',//類型是線形圖 categories: ['2012', '2013', '2014', '2015', '2016', '2017'], series: [{ name: '交易量', data: objData,//websocket接收到的數(shù)據(jù) format: function (val) { if (typeof val == "string") { val = parseFloat(val); } return val.toFixed(2) + '萬元'; } }, ], yAxis: { title: '交易金額 (萬元)', format: function (val) { return val.toFixed(2); }, min: 0 }, width: 320, height: 200 }); }) //連接失敗 wx.onSocketError(function() { console.log('websocket連接失??!'); }) }, })
這里WebSocket的地址是ws://localhost,端口是12345,連接成功后,向服務(wù)器發(fā)送stock,然后服務(wù)器向小程序提供數(shù)據(jù)信息。
WebSocket的服務(wù)器端我是用PHP寫的,這里貼一下,大家可以參考一下:
<?php include 'WebSocket.php'; class WebSocket2 extends WebSocket{ public function run(){ while(true){ $socketArr = $this->sockets; $write = NULL; $except = NULL; socket_select($socketArr, $write, $except, NULL); foreach ($socketArr as $socket){ if ($socket == $this->master){ $client = socket_accept($this->master); if ($client < 0){ $this->log("socket_accept() failed"); continue; }else{ $this->connect($client); } } else{ $this->log("----------New Frame Start-------"); $bytes = @socket_recv($socket,$buffer,2048,0); if ($bytes == 0){ $this->disconnect($socket); }else{ $user = $this->getUserBySocket($socket); if (!$user->handshake){ $this->doHandShake($user, $buffer); }else{ $buffer = $this->unwrap($user->socket, $buffer); //請求為stock時,向通道內(nèi)推送數(shù)據(jù) if ($buffer == 'stock') { $arr = array(); //模擬數(shù)據(jù) for ($i=0; $i < 6; $i++) { $arr[] = rand(1, 100) / 100; } $this->send($user->socket, json_encode($arr)); } } } } } } } } $s = new WebSocket2('localhost', 12345); $s -> run();
用PHP寫WebSocket稍微有些麻煩,懂Node.js的可用Node.js寫一下,Node.js寫后端的WebSocket很方便。
實例效果:
微信WebSocketAPI參數(shù)說明
wx.connectSocket(OBJECT)
[tr] 參數(shù) 類型 必填 說明[/tr]
url | String | 是 | 開發(fā)者服務(wù)器接口地址,必須是 wss 協(xié)議,且域名必須是后臺配置的合法域名 |
data | Object | 否 | 請求的數(shù)據(jù) |
header | Object | 否 | HTTP Header , header 中不能設(shè)置 Referer |
method | String | 否 | 默認(rèn)是GET,有效值為: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
wx.onSocketOpen(CALLBACK)
監(jiān)聽WebSocket連接打開事件。
wx.onSocketError(CALLBACK)
監(jiān)聽WebSocket錯誤。
wx.sendSocketMessage(OBJECT)
通過 WebSocket 連接發(fā)送數(shù)據(jù),需要先 wx.connectSocket,并在 wx.onSocketOpen 回調(diào)之后才能發(fā)送。
[tr] 參數(shù) 類型 必填 說明[/tr]
data | String/ArrayBuffer | 是 | 需要發(fā)送的內(nèi)容 |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
wx.onSocketMessage(CALLBACK)
監(jiān)聽WebSocket接受到服務(wù)器的消息事件。
[tr] 參數(shù) 類型 說明[/tr]
data | String/ArrayBuffer | 服務(wù)器返回的消息 |
wx.closeSocket()
關(guān)閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監(jiān)聽WebSocket關(guān)閉。
關(guān)于localhost
這里說明一下localhost,上述代碼中我用到了localhost的本地請求,這里只是占位使用,在程序編寫中是不支持localhost本地請求的,這里大家要注意一下。
以上是“微信小程序WebSocket協(xié)議是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。