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数据及时更新的更多相关文章
- WPF DataGrid 绑定数据及时更新的处理
原文:WPF DataGrid 绑定数据及时更新的处理 默认情况下datagrid 绑定数据源后,在界面编辑某一列后,数据不会及时更新到内存对象中.如在同一行上有一个命令对来获取 当前选中行(内存对象 ...
- 配置vuejs加载模拟数据
[个人笔记,非技术博客] 1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以 2.配置dev-server.js var router = express.Router(); ...
- Thinkphp5获取数据库数据到视图
这是学习thinkhp5的基础篇笔记. 本文主要讲怎么配置数据库链接,以及查询数据库数据,并且最后将数据赋给视图. 数据库配置: thinkphp5的数据库配置默认在conf下的database.ph ...
- thinkphp5随机查询数据
ThinkPHP5从V5.0.17之后,如果排序使用到SQL函数,要用orderRaw()代替order()进行排序. 例:Db::name('user')->orderRaw('rand()' ...
- thinkphp5 查询的数据是对象时,获取原始数据方法
获取原始数据 如果你定义了获取器的情况下,希望获取数据表中的原始数据,可以使用: $user = User::get(1); // 通过获取器获取字段 echo $user->status; / ...
- thinkphp5 列表页数据分页查询3-带搜索条件
先加载模板然后在前端HTML页面请求数据 /** * 加载列表页模板 * @author 冯广福 */ public function index() { LogWriteService::write ...
- thinkphp5 列表页数据分页查询2-带搜索条件
一.控制器部分 <?php namespace app\user\controller; use app\index\controller\Common; use app\user\model\ ...
- thinkphp5 列表页数据分页查询-带搜索条件
一.控制器部分 <?php namespace app\user\controller; use app\user\model\HelpCenterManual as HelpCenterMan ...
- vuejs父子组件的数据传递
在vue中,父组件往子组件传递参数都是通过属性的形式来传递的 <div id='root'> <counter :count = '1'></counter> &l ...
随机推荐
- Python - ORM(数据库相关)
1. 概念 目标:类/对象操作 -> SQL语句 -> DB API -> 再在数据库中执行.ORM做前两部,因为ORM本身无法操作数据库.参考:https://baike.baid ...
- Java 对不同类型的数据文件的读写操作整合器[JSON,XML,CSV]-[经过设计模式改造](2020年寒假小目标03)
日期:2020.01.16 博客期:125 星期四 我想说想要构造这样一个通用文件读写器确实不容易,嗯~以后会添加更多的文件类型,先来熟悉一下文件内容样式: <?xml version=&quo ...
- jeDate日期控件精确到秒
案例下载 链接: https://pan.baidu.com/s/1m7eEW6K6Bt1t-0OjVY_Wxw 密码: xmei <script type="text/javascr ...
- Mini_Linux需要搭的环境
1.bash:ifconfig:command not found sudo yum install -y net-tools 2.如果Linux系统是通过复制得到 需要更改hostname vi ...
- POJ 2947:Widget Factory 求同余方程
Widget Factory Time Limit: 7000MS Memory Limit: 65536K Total Submissions: 5173 Accepted: 1790 De ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- JavaScript函数用法
本文我们来学习下js函数的一些用法. 上图的要点为: 1.函数具有属性,如foo.length和foo.name. 2.arguments是类数组,arguments.length为实参的数目. 3. ...
- JSONObject.fromObject() 转string时,实体里面的时间错乱的问题
在把要入库的数据实体转成JSON字符串发给kafka的时候,出现了问题,转换完以后,就变成这样子的了,真的是第一次见到这种,真的是长见识了 然后百度了一下:https://www.cnblogs.co ...
- Mapreduce实例——WordCount
实验步骤 切换目录到/apps/hadoop/sbin下,启动hadoop. cd /apps/hadoop/sbin ./start-all.sh 2.在linux上,创建一个目录/data/map ...
- BlackArch-Tools
BlackArch-Tools 简介 安装在ArchLinux之上添加存储库从blackarch存储库安装工具替代安装方法BlackArch Linux Complete Tools List 简介 ...