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

			});

                 }

         }

}

巴特西

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

最新文章

热门文章