微信小程序 WebSocket詳解及應用
微信小程序 WebSocket
實例效果:

今天主要說一下微信的WebSocket接口以及在小程序中的使用。
WebSocket是什么(簡述)
微信的WebSocket接口和HTML5的WebSocket基本一樣,是HTTP協(xié)議升級來的,做為一個新的Socket在B/S上使用,它實現(xiàn)了瀏覽器與服務器全雙工通信。
因為這里是做小程序,所以就不對WebSocket的底層和協(xié)議做過多的說明了,只是稍微介紹一下。想了解詳細的WebSocket可以參考如下:WebSocket 協(xié)議
WebSocket與Ajax 的選擇
在WebSocket出來之前,實現(xiàn)即時通訊通常使用Ajax來實現(xiàn),而Ajax是通過輪詢的方式進行實時數(shù)據(jù)的獲取,輪詢就是在指定的時間間隔內,進行HTTP 請求來獲取數(shù)據(jù),而這種方式會產(chǎn)生一些弊端,一方面產(chǎn)生過多的HTTP請求,占用帶寬,增大服務器的相應,浪費資源,另一方面,因為不是每一次請求都會有數(shù)據(jù)變化(就像聊天室),所以就會造成請求的利用率低。
而WebSocket正好能夠解決上面的弊端,WebSocket是客戶端與服務器之前專門建立一條通道,請求也只請求一次,而且可以從同道中實時的獲取服務器的數(shù)據(jù),所以當應用到實時的應用上時,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,連接成功后,向服務器發(fā)送stock,然后服務器向小程序提供數(shù)據(jù)信息。
WebSocket的服務器端我是用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時,向通道內推送數(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代碼:代碼下載
微信WebSocketAPI參數(shù)說明wx.connectSocket(OBJECT)
| 參數(shù) | 類型 | 必填 | 說明 |
|---|---|---|---|
| url | String | 是 | 開發(fā)者服務器接口地址,必須是 wss 協(xié)議,且域名必須是后臺配置的合法域名 |
| data | Object | 否 | 請求的數(shù)據(jù) |
| header | Object | 否 | HTTP Header , header 中不能設置 Referer |
| method | String | 否 | 默認是GET,有效值為: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
| success | Function | 否 | 接口調用成功的回調函數(shù) |
| fail | Function | 否 | 接口調用失敗的回調函數(shù) |
| complete | Function | 否 | 接口調用結束的回調函數(shù)(調用成功、失敗都會執(zhí)行) |
wx.onSocketOpen(CALLBACK)
監(jiān)聽WebSocket連接打開事件。
wx.onSocketError(CALLBACK)
監(jiān)聽WebSocket錯誤。
wx.sendSocketMessage(OBJECT)
通過 WebSocket 連接發(fā)送數(shù)據(jù),需要先 wx.connectSocket,并在 wx.onSocketOpen 回調之后才能發(fā)送。
| 參數(shù) | 類型 | 必填 | 說明 |
|---|---|---|---|
| data | String/ArrayBuffer | 是 | 需要發(fā)送的內容 |
| success | Function | 否 | 接口調用成功的回調函數(shù) |
| fail | Function | 否 | 接口調用失敗的回調函數(shù) |
| complete | Function | 否 | 接口調用結束的回調函數(shù)(調用成功、失敗都會執(zhí)行) |
監(jiān)聽WebSocket接受到服務器的消息事件。
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| data | String/ArrayBuffer | 服務器返回的消息 |
關閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監(jiān)聽WebSocket關閉。
關于localhost
這里說明一下localhost,上述代碼中我用到了localhost的本地請求,這里只是占位使用,在程序編寫中是不支持localhost本地請求的,這里大家要注意一下。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- php使用websocket示例詳解
- Javascript WebSocket使用實例介紹(簡明入門教程)
- Nginx反向代理websocket配置實例
- Python通過websocket與js客戶端通信示例分析
- 使用Java和WebSocket實現(xiàn)網(wǎng)頁聊天室實例代碼
- Java后端Tomcat實現(xiàn)WebSocket實例教程
- Android中使用WebSocket實現(xiàn)群聊和消息推送功能(不使用WebView)
- 讓ie6也支持websocket采用flash封裝實現(xiàn)
- Spring和Websocket相結合實現(xiàn)消息的推送
- 完美解決spring websocket自動斷開連接再創(chuàng)建引發(fā)的問題
- JavaScript之WebSocket技術詳解
- 淺析nodejs實現(xiàn)Websocket的數(shù)據(jù)接收與發(fā)送
- 使用swoole擴展php websocket示例
- php中使用websocket詳解
- php+html5基于websocket實現(xiàn)聊天室的方法
- 詳解WebSocket+spring示例demo(已使用sockJs庫)
- C#實現(xiàn)WebSocket協(xié)議客戶端和服務器websocket sharp組件實例解析
- HTML5 WebSocket技術使用詳解
相關文章
Electron?網(wǎng)絡攔截實戰(zhàn)示例詳解
這篇文章主要為大家介紹了Electron?網(wǎng)絡攔截實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03

