微信小程式入門六: WebSocket應用
例項內容
今天主要說一下微信的WebSocket
介面以及在小程式中的使用。
WebSocket
是什麼(簡述)
微信的WebSocket
介面和HTML5的WebSocket
基本一樣,是HTTP協議升級來的,做為一個新的Socket
在B/S上使用,它實現了瀏覽器與伺服器全雙工通訊。
因為這裡是做小程式,所以就不對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
本地請求的,這裡大家要注意一下。
部落格名稱:王樂平部落格
部落格地址:http://blog.lepingde.com
CSDN部落格地址:http://blog.csdn.net/lecepin