微信小程序 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代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
// pages/stock/stock.js
//加載插件
var
wxCharts = require(
'wxcharts.js'
);
Page({
data: {},
onLoad:
function
(options) {
//建立連接
wx.connectSocket({
})
//連接成功
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寫的，這里貼一下，大家可以參考一下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<?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代碼：代碼下載
微信WebSocketAPI參數說明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 | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
監聽WebSocket接受到服務器的消息事件。
| 參數 | 類型 | 說明 |
|---|---|---|
| data | String/ArrayBuffer | 服務器返回的消息 |
關閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監聽WebSocket關閉。
關於localhost
這里說明一下localhost，上述代碼中我用到了localhost的本地請求，這里只是占位使用，在程序編寫中是不支持localhost本地請求的，這里大家要注意一下。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！