微信小程序: WebSocket應(yīng)用
WebSocket是什么（簡(jiǎn)述）
微信的WebSocket接口和HTML5的WebSocket基本一樣，是HTTP協(xié)議升級(jí)來(lái)的，做為一個(gè)新的Socket在B/S上使用，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。
因?yàn)檫@里是做小程序，所以就不對(duì)WebSocket的底層和協(xié)議做過(guò)多的說(shuō)明了，只是稍微介紹一下。想了解詳細(xì)的WebSocket可以參考如下：
WebSocket 協(xié)議
WebSocket與Ajax 的選擇
WebSocket協(xié)議名
WebSocket的鏈接不是以http或https開(kāi)頭的，而是以ws和wss開(kāi)頭的，這里需要注意一下。
實(shí)例：實(shí)時(shí)顯示交易信息
這里類似于實(shí)時(shí)查看股票信息，這里用到了圖表插件wxchart。
wxchart插件地址：插件下載
基本說(shuō)的差不多了，正式開(kāi)始。
添加stock頁(yè)面：
將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) + '萬(wàn)元';
}
},
],
yAxis: {
title: '交易金額 (萬(wàn)元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: 320,
height: 200
});
})
//連接失敗
wx.onSocketError(function() {
console.log('websocket連接失?。?#39;);
})
},
})
這里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);
//請(qǐng)求為stock時(shí)，向通道內(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代碼：代碼下載
實(shí)例效果：
微信WebSocketAPI參數(shù)說(shuō)明
wx.connectSocket(OBJECT)
wx.onSocketOpen(CALLBACK)
監(jiān)聽(tīng)WebSocket連接打開(kāi)事件。
wx.onSocketError(CALLBACK)
監(jiān)聽(tīng)WebSocket錯(cuò)誤。
wx.sendSocketMessage(OBJECT)
通過(guò) WebSocket 連接發(fā)送數(shù)據(jù)，需要先 wx.connectSocket，并在 wx.onSocketOpen 回調(diào)之后才能發(fā)送。
wx.onSocketMessage(CALLBACK)
監(jiān)聽(tīng)WebSocket接受到服務(wù)器的消息事件。
| 參數(shù) | 類型 | 說(shuō)明 |
|---|---|---|
| data | String/ArrayBuffer | 服務(wù)器返回的消息 |
wx.closeSocket()
wx.onSocketClose(CALLBACK)
監(jiān)聽(tīng)WebSocket關(guān)閉。
關(guān)于localhost
