微信小程序: WebSocket應用
實例內容
今天主要說一下微信的WebSocket
接口以及在小程序中的使用。
WebSocket
是什麽(簡述)
微信的WebSocket
接口和HTML5的WebSocket
基本一樣,是HTTP協議升級來的,做為一個新的Socket
在B/S上使用,它實現了瀏覽器與服務器全雙工通信。
因為這裏是做小程序,所以就不對WebSocket
的底層和協議做過多的說明了,只是稍微介紹一下。想了解詳細的WebSocket
可以參考如下:
WebSocket 協議
WebSocket
與Ajax
的選擇
在WebSocket
出來之前,實現即時通訊通常使用Ajax
來實現,而Ajax
是通過輪詢的方式進行實時數據的獲取,輪詢就是在指定的時間間隔內,進行HTTP 請求來獲取數據,而這種方式會產生一些弊端,一方面產生過多的HTTP請求,占用帶寬,增大服務器的相應,浪費資源,另一方面,因為不是每一次請求都會有數據變化(就像聊天室),所以就會造成請求的利用率低。
而WebSocket
正好能夠解決上面的弊端,WebSocket
是客戶端與服務器之前專門建立一條通道,請求也只請求一次,而且可以從同道中實時的獲取服務器的數據,所以當應用到實時的應用上時,WebSocket
是一個很不錯的選擇。
WebSocket
協議名
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‘,
})
})
//接收數據
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接收到的數據
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
,連接成功後,向服務器發送stock
,然後服務器向小程序提供數據信息。
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時,向通道內推送數據
if ($buffer == ‘stock‘) {
$arr = array();
//模擬數據
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參數說明
wx.connectSocket(OBJECT)
參數 | 類型 | 必填 | 說明 |
---|---|---|---|
url | String | 是 | 開發者服務器接口地址,必須是 wss 協議,且域名必須是後臺配置的合法域名 |
data | Object | 否 | 請求的數據 |
header | Object | 否 | HTTP Header , header 中不能設置 Referer |
method | String | 否 | 默認是GET,有效值為: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
success | Function | 否 | 接口調用成功的回調函數 |
fail | Function | 否 | 接口調用失敗的回調函數 |
complete | Function | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) |
wx.onSocketOpen(CALLBACK)
監聽WebSocket連接打開事件。
wx.onSocketError(CALLBACK)
監聽WebSocket錯誤。
wx.sendSocketMessage(OBJECT)
通過 WebSocket
連接發送數據,需要先 wx.connectSocket
,並在 wx.onSocketOpen
回調之後才能發送。
參數 | 類型 | 必填 | 說明 |
---|---|---|---|
data | String/ArrayBuffer | 是 | 需要發送的內容 |
success | Function | 否 | 接口調用成功的回調函數 |
fail | Function | 否 | 接口調用失敗的回調函數 |
complete | Function | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) |
wx.onSocketMessage(CALLBACK)
監聽WebSocket接受到服務器的消息事件。
參數 | 類型 | 說明 |
---|---|---|
data | String/ArrayBuffer | 服務器返回的消息 |
wx.closeSocket()
關閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監聽WebSocket關閉。
關於localhost
這裏說明一下localhost
,上述代碼中我用到了localhost
的本地請求,這裏只是占位使用,在程序編寫中是不支持localhost
本地請求的,這裏大家要註意一下。
微信小程序: WebSocket應用