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);
			});
                 }
         }
}