vuejs+thinkphp5+phpsocketIO+timer数据及时更新

1.安装thinkphp5.0以上版本包含workerman框架
2.composer安装composer require workerman/phpsocket.io
3.vue中调用需要加载weapp.socket.io 
4.注意问题 
   vue中尝试过用原生websocket连接(ws://IP:port)但编译成小程序或者app时并没有很好的兼容性由于各种问题 相比之下socketio的兼容性明显更好一些
   phpsocketio和workerman可以直接集成在thinkphp5.0以上的版本中 workerman中有很多如定时器Timer之类的方法可以直接调用

新增启动服务文件server.php，在项目根目录

#!/usr/bin/env php
<?php
define('APP_PATH', __DIR__ . '/application/');
define('BIND_MODULE','socketio/Server/index');
// 加载框架引导文件
require __DIR__ . '/thinkphp/start.php';

　　创建服务控制器

├─application           应用目录
│  ├─socketio           新创建目录
│  │  ├─controller
│  │  │  ├─Psserver.php   启动文件

创建api触发socketio

public function api()
{
    // 推送的url地址，使用自己的服务器地址
    $push_api_url = "http://0.0.0.0:5880";//这里同样不需要更改IP。只是端口一定需要和server.php onworker的一样
    $post_data = array(
       "type" => "publish",
       "content" => "这个是推送的测试数据",
     );
        $ch = curl_init ();
        curl_setopt ( $ch, CURLOPT_URL, $push_api_url );
        curl_setopt ( $ch, CURLOPT_POST, 1 );
        curl_setopt ( $ch, CURLOPT_HEADER, 0 );
        curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 );
        curl_setopt ( $ch, CURLOPT_POSTFIELDS, $post_data );
        curl_setopt ($ch, CURLOPT_HTTPHEADER, array("Expect:"));
     $return = curl_exec ( $ch );
     curl_close ( $ch );
     var_export($return);
}

　

客户端

<input type="text" name="data" id="data"/>
<button id="btn">发送</button>

<script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
// 如果服务端不在本机，请把127.0.0.1改成服务端ip
var socket = io('http://IP:2346');
// 当连接服务端成功时触发connect默认事件
socket.on('connect', function(){
    console.log('connect success');
});

$('#btn').click(function(){
	var data = $('#data').val();
	// 触发服务端的chat message事件
	socket.emit('chat message', data);
	// 服务端通过emit('chat message from server', $msg)触发客户端的chat message from server事件
	socket.on('chat message from server', function(data){
	    console.log('get message:' + data + ' from server');
	});
});

// 后端推送来在线数据时
socket.on('update_online_count', function(online_stat){
    console.log(online_stat);
});

// 后端推送来消息时
    socket.on('new_msg', function(msg){
        console.log("收到消息："+msg);
    });
</script>

　　服务器端

namespace app\socketio\controller;
//use think\worker\Server;
use PHPSocketIO\SocketIO;
use Workerman\Worker;
use Workerman\Lib\Timer; // 引入WM框架的类库
use think\cache\driver\Redis;
use think\Db;

class Psserver
{
    public function index()
    {

      $io = new SocketIO(2346);//socket的端口

      $io->on('connection', function ($socket) use ($io) {
          Timer::add(2, function ()use ($io){
            $data = db('ws_test')->order(['addtime'=>'desc'])->find();
            $io->emit('price',json_encode($redis_data));
          });
      });

      Worker::runAll();
    }
}

php psio_server.php start
php psio_server.php start 启动
php psio_server.php stop 停止
php psio_server.php restart 重启
php psio_server.php status 当前服务状态
php psio_server.php connections 当前连接用户连接信息

vue端接收

import io from 'weapp.socket.io';

export default {
	data() {
		return {
			text:'11111',
		};
	},
	onLoad: function(e) {
		this.send();
	},
	methods: {
		send() {
			const socket = (this.socket = io('http://IP:2346/'));
			// 连接成功
			socket.on('connect', () => {
				console.log('连接成功');
			});
                         // 连接错误
			socket.on('connect_error', d => {
				console.log('连接失败', d);
			});
                         // 接受到新消息
			socket.on('price', d => {
			    let data = JSON.parse(d);
			    this.text =data.price;
			    console.log(data.price);
			});
                 }
         }
}