微信小程序 WebSocket詳解及應(yīng)用
微信小程序 WebSocket
實(shí)例效果:

今天主要說(shuō)一下微信的WebSocket接口以及在小程序中的使用。
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出來(lái)之前,實(shí)現(xiàn)即時(shí)通訊通常使用Ajax來(lái)實(shí)現(xiàn),而Ajax是通過(guò)輪詢的方式進(jìn)行實(shí)時(shí)數(shù)據(jù)的獲取,輪詢就是在指定的時(shí)間間隔內(nèi),進(jìn)行HTTP 請(qǐng)求來(lái)獲取數(shù)據(jù),而這種方式會(huì)產(chǎn)生一些弊端,一方面產(chǎn)生過(guò)多的HTTP請(qǐng)求,占用帶寬,增大服務(wù)器的相應(yīng),浪費(fèi)資源,另一方面,因?yàn)椴皇敲恳淮握?qǐng)求都會(huì)有數(shù)據(jù)變化(就像聊天室),所以就會(huì)造成請(qǐng)求的利用率低。
而WebSocket正好能夠解決上面的弊端,WebSocket是客戶端與服務(wù)器之前專門建立一條通道,請(qǐng)求也只請(qǐng)求一次,而且可以從同道中實(shí)時(shí)的獲取服務(wù)器的數(shù)據(jù),所以當(dāng)應(yīng)用到實(shí)時(shí)的應(yīng)用上時(shí),WebSocket是一個(gè)很不錯(cuò)的選擇。
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連接失??!');
})
},
})
這里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代碼:代碼下載
微信WebSocketAPI參數(shù)說(shuō)明wx.connectSocket(OBJECT)
| 參數(shù) | 類型 | 必填 | 說(shuō)明 |
|---|---|---|---|
| url | String | 是 | 開(kāi)發(fā)者服務(wù)器接口地址,必須是 wss 協(xié)議,且域名必須是后臺(tái)配置的合法域名 |
| data | Object | 否 | 請(qǐng)求的數(shù)據(jù) |
| header | Object | 否 | HTTP Header , header 中不能設(shè)置 Referer |
| method | String | 否 | 默認(rèn)是GET,有效值為: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) |
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ā)送。
| 參數(shù) | 類型 | 必填 | 說(shuō)明 |
|---|---|---|---|
| data | String/ArrayBuffer | 是 | 需要發(fā)送的內(nèi)容 |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) |
監(jiān)聽(tīng)WebSocket接受到服務(wù)器的消息事件。
| 參數(shù) | 類型 | 說(shuō)明 |
|---|---|---|
| data | String/ArrayBuffer | 服務(wù)器返回的消息 |
關(guān)閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監(jiān)聽(tīng)WebSocket關(guān)閉。
關(guān)于localhost
這里說(shuō)明一下localhost,上述代碼中我用到了localhost的本地請(qǐng)求,這里只是占位使用,在程序編寫中是不支持localhost本地請(qǐng)求的,這里大家要注意一下。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- php使用websocket示例詳解
- Javascript WebSocket使用實(shí)例介紹(簡(jiǎn)明入門教程)
- Nginx反向代理websocket配置實(shí)例
- Python通過(guò)websocket與js客戶端通信示例分析
- 使用Java和WebSocket實(shí)現(xiàn)網(wǎng)頁(yè)聊天室實(shí)例代碼
- Java后端Tomcat實(shí)現(xiàn)WebSocket實(shí)例教程
- Android中使用WebSocket實(shí)現(xiàn)群聊和消息推送功能(不使用WebView)
- 讓ie6也支持websocket采用flash封裝實(shí)現(xiàn)
- Spring和Websocket相結(jié)合實(shí)現(xiàn)消息的推送
- 完美解決spring websocket自動(dòng)斷開(kāi)連接再創(chuàng)建引發(fā)的問(wèn)題
- JavaScript之WebSocket技術(shù)詳解
- 淺析nodejs實(shí)現(xiàn)Websocket的數(shù)據(jù)接收與發(fā)送
- 使用swoole擴(kuò)展php websocket示例
- php中使用websocket詳解
- php+html5基于websocket實(shí)現(xiàn)聊天室的方法
- 詳解WebSocket+spring示例demo(已使用sockJs庫(kù))
- C#實(shí)現(xiàn)WebSocket協(xié)議客戶端和服務(wù)器websocket sharp組件實(shí)例解析
- HTML5 WebSocket技術(shù)使用詳解
相關(guān)文章
Fabric.js 實(shí)現(xiàn)變換視窗示例詳解
這篇文章主要為大家介紹了Fabric.js 實(shí)現(xiàn)變換視窗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
LoadRunner調(diào)用JS加密后登錄實(shí)現(xiàn)
這篇文章主要為大家介紹了LoadRunner調(diào)用JS加密后登錄實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼
這篇文章主要介紹了微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
如果文字過(guò)長(zhǎng),則將過(guò)長(zhǎng)的部分變成省略號(hào)顯示
如果文字過(guò)長(zhǎng),則將過(guò)長(zhǎng)的部分變成省略號(hào)顯示...2006-06-06
JavaScript?Canvas實(shí)現(xiàn)噪點(diǎn)濾鏡回憶童年電視雪花屏
這篇文章主要為大家介紹了JavaScript?Canvas實(shí)現(xiàn)噪點(diǎn)濾鏡回憶童年電視雪花屏,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
微信小程序中頁(yè)面FOR循環(huán)和嵌套循環(huán)
這篇文章主要介紹了微信小程序中頁(yè)面FOR循環(huán)和嵌套循環(huán)的相關(guān)資料,需要的朋友可以參考下2017-06-06

