微信小程序 WebSocket詳解及應(yīng)用
微信小程序 WebSocket
實(shí)例效果:
今天主要說一下微信的WebSocket
接口以及在小程序中的使用。
WebSocket
是什么(簡述)
微信的WebSocket
接口和HTML5的WebSocket
基本一樣,是HTTP協(xié)議升級來的,做為一個新的Socket
在B/S上使用,它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。
因?yàn)檫@里是做小程序,所以就不對WebSocket
的底層和協(xié)議做過多的說明了,只是稍微介紹一下。想了解詳細(xì)的WebSocket
可以參考如下:WebSocket 協(xié)議
WebSocket與Ajax 的選擇
在WebSocket
出來之前,實(shí)現(xiàn)即時通訊通常使用Ajax
來實(shí)現(xiàn),而Ajax
是通過輪詢的方式進(jìn)行實(shí)時數(shù)據(jù)的獲取,輪詢就是在指定的時間間隔內(nèi),進(jìn)行HTTP 請求來獲取數(shù)據(jù),而這種方式會產(chǎn)生一些弊端,一方面產(chǎn)生過多的HTTP請求,占用帶寬,增大服務(wù)器的相應(yīng),浪費(fèi)資源,另一方面,因?yàn)椴皇敲恳淮握埱蠖紩袛?shù)據(jù)變化(就像聊天室),所以就會造成請求的利用率低。
而WebSocket
正好能夠解決上面的弊端,WebSocket
是客戶端與服務(wù)器之前專門建立一條通道,請求也只請求一次,而且可以從同道中實(shí)時的獲取服務(wù)器的數(shù)據(jù),所以當(dāng)應(yīng)用到實(shí)時的應(yīng)用上時,WebSocket
是一個很不錯的選擇。
WebSocket
協(xié)議名
WebSocket
的鏈接不是以http
或https
開頭的,而是以ws
和wss
開頭的,這里需要注意一下。
實(shí)例:實(shí)時顯示交易信息
這里類似于實(shí)時查看股票信息,這里用到了圖表插件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
很方便。
上面用到的WebSocket.php代碼:代碼下載
微信WebSocket
API參數(shù)說明wx.connectSocket(OBJECT)
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
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ā)送。
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
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í)行) |
監(jiān)聽WebSocket接受到服務(wù)器的消息事件。
參數(shù) | 類型 | 說明 |
---|---|---|
data | String/ArrayBuffer | 服務(wù)器返回的消息 |
關(guān)閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監(jiān)聽WebSocket關(guān)閉。
關(guān)于localhost
這里說明一下localhost
,上述代碼中我用到了localhost
的本地請求,這里只是占位使用,在程序編寫中是不支持localhost
本地請求的,這里大家要注意一下。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- php使用websocket示例詳解
- Javascript WebSocket使用實(shí)例介紹(簡明入門教程)
- Nginx反向代理websocket配置實(shí)例
- Python通過websocket與js客戶端通信示例分析
- 使用Java和WebSocket實(shí)現(xiàn)網(wǎng)頁聊天室實(shí)例代碼
- Java后端Tomcat實(shí)現(xiàn)WebSocket實(shí)例教程
- Android中使用WebSocket實(shí)現(xiàn)群聊和消息推送功能(不使用WebView)
- 讓ie6也支持websocket采用flash封裝實(shí)現(xiàn)
- Spring和Websocket相結(jié)合實(shí)現(xiàn)消息的推送
- 完美解決spring websocket自動斷開連接再創(chuàng)建引發(fā)的問題
- JavaScript之WebSocket技術(shù)詳解
- 淺析nodejs實(shí)現(xiàn)Websocket的數(shù)據(jù)接收與發(fā)送
- 使用swoole擴(kuò)展php websocket示例
- php中使用websocket詳解
- php+html5基于websocket實(shí)現(xiàn)聊天室的方法
- 詳解WebSocket+spring示例demo(已使用sockJs庫)
- C#實(shí)現(xiàn)WebSocket協(xié)議客戶端和服務(wù)器websocket sharp組件實(shí)例解析
- HTML5 WebSocket技術(shù)使用詳解
相關(guān)文章
Electron?網(wǎng)絡(luò)攔截實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Electron?網(wǎng)絡(luò)攔截實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序 支付功能實(shí)現(xiàn)PHP實(shí)例詳解
這篇文章主要介紹了微信小程序 支付功能實(shí)現(xiàn)PHP實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05TypeScript5.2引入新關(guān)鍵字using介紹
這篇文章主要介紹了TypeScript5.2引入新關(guān)鍵字using使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06