php socket 小程序,微信小程序： webSocket 应用

内容说明

主要说一下微信小程序的websocket接口以及在小程序中的使用；

webSocket 是什么？

微信的websocket跟HTML5的websocket基本一致。都是HTTP协议升级来的，做为一个全新的Socket在B/S上使用，实现了服务器和浏览器的全双工通信。

Websocket 于 AJAX的利弊

在Websocket出来之前，都是通过AJAX来实现即时通信的。但是由于AJAX是采用轮循的方式来实时获取数据的，意思就是说在指定的时间间隔内，进行HTTP请求，而这种方式会产生一些弊端，一方面由于发送的HTTP请求太多，容易占用太多的带宽，增加服务器的负荷；另一方面，并不是每一次的请求都会有数据变化，所以造成请求到结果的效率有时候会很低，(比如聊天室);

而Websocket正好解决了这些弊端，它是在服务器和客户端建立了一条通道，请求只是请求一次，而且可以从通道中实时的获取数据。

Websocket协议

Websocket的连接不是以http 或 https开头的，二是以ws 或 wss开头的.

实例： 实时显示交易信息

这里用到了图表插件wxchart。

添加stock页面：

将wxchart.js放入到pages/stock/中。

socket.wxml

实时交易信息

socket.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，然后服务器向小程序提供数据信息。

附带一个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();

效果图