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数据及时更新的更多相关文章

  1. WPF DataGrid 绑定数据及时更新的处理

    原文:WPF DataGrid 绑定数据及时更新的处理 默认情况下datagrid 绑定数据源后,在界面编辑某一列后,数据不会及时更新到内存对象中.如在同一行上有一个命令对来获取 当前选中行(内存对象 ...

  2. 配置vuejs加载模拟数据

    [个人笔记,非技术博客] 1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以 2.配置dev-server.js var router = express.Router(); ...

  3. Thinkphp5获取数据库数据到视图

    这是学习thinkhp5的基础篇笔记. 本文主要讲怎么配置数据库链接,以及查询数据库数据,并且最后将数据赋给视图. 数据库配置: thinkphp5的数据库配置默认在conf下的database.ph ...

  4. thinkphp5随机查询数据

    ThinkPHP5从V5.0.17之后,如果排序使用到SQL函数,要用orderRaw()代替order()进行排序. 例:Db::name('user')->orderRaw('rand()' ...

  5. thinkphp5 查询的数据是对象时,获取原始数据方法

    获取原始数据 如果你定义了获取器的情况下,希望获取数据表中的原始数据,可以使用: $user = User::get(1); // 通过获取器获取字段 echo $user->status; / ...

  6. thinkphp5 列表页数据分页查询3-带搜索条件

    先加载模板然后在前端HTML页面请求数据 /** * 加载列表页模板 * @author 冯广福 */ public function index() { LogWriteService::write ...

  7. thinkphp5 列表页数据分页查询2-带搜索条件

    一.控制器部分 <?php namespace app\user\controller; use app\index\controller\Common; use app\user\model\ ...

  8. thinkphp5 列表页数据分页查询-带搜索条件

    一.控制器部分 <?php namespace app\user\controller; use app\user\model\HelpCenterManual as HelpCenterMan ...

  9. vuejs父子组件的数据传递

    在vue中,父组件往子组件传递参数都是通过属性的形式来传递的 <div id='root'> <counter :count = '1'></counter> &l ...

随机推荐

  1. Python - ORM(数据库相关)

    1. 概念 目标:类/对象操作 -> SQL语句 -> DB API -> 再在数据库中执行.ORM做前两部,因为ORM本身无法操作数据库.参考:https://baike.baid ...

  2. Java 对不同类型的数据文件的读写操作整合器[JSON,XML,CSV]-[经过设计模式改造](2020年寒假小目标03)

    日期:2020.01.16 博客期:125 星期四 我想说想要构造这样一个通用文件读写器确实不容易,嗯~以后会添加更多的文件类型,先来熟悉一下文件内容样式: <?xml version=&quo ...

  3. jeDate日期控件精确到秒

    案例下载 链接: https://pan.baidu.com/s/1m7eEW6K6Bt1t-0OjVY_Wxw 密码: xmei <script type="text/javascr ...

  4. Mini_Linux需要搭的环境

    1.bash:ifconfig:command not found sudo yum install -y net-tools 2.如果Linux系统是通过复制得到  需要更改hostname vi ...

  5. POJ 2947:Widget Factory 求同余方程

    Widget Factory Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 5173   Accepted: 1790 De ...

  6. VUE 父子组件之间通信传值 props和 $emit

    1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件          <div id="app" >               <tr ...

  7. JavaScript函数用法

    本文我们来学习下js函数的一些用法. 上图的要点为: 1.函数具有属性,如foo.length和foo.name. 2.arguments是类数组,arguments.length为实参的数目. 3. ...

  8. JSONObject.fromObject() 转string时,实体里面的时间错乱的问题

    在把要入库的数据实体转成JSON字符串发给kafka的时候,出现了问题,转换完以后,就变成这样子的了,真的是第一次见到这种,真的是长见识了 然后百度了一下:https://www.cnblogs.co ...

  9. Mapreduce实例——WordCount

    实验步骤 切换目录到/apps/hadoop/sbin下,启动hadoop. cd /apps/hadoop/sbin ./start-all.sh 2.在linux上,创建一个目录/data/map ...

  10. BlackArch-Tools

    BlackArch-Tools 简介 安装在ArchLinux之上添加存储库从blackarch存储库安装工具替代安装方法BlackArch Linux Complete Tools List 简介 ...