layout: posttitle: Swoole结合Vuejs实现动态图表变化
subtitle: Swoole结合Vuejs实现动态图表变化
date: 2019-02-27
author: he xiaodong
header-img: img/default-post-bg.jpg
catalog: true
tags:
- PHP
- Vuejs
- Swoole

大概需求是展示类似股票行情折线图的一个页面，借助 vuejs 的动态渲染和 swoole 长链接的特性，不刷新页面 + 不 ajax 轮询去请求数据，差不多符合新技术了，用户端主要用到了 echarts 和 vuejs

  逻辑就是打开页面的时候，自行读取以往的数据，同时链接到 swoole 服务，swoole 中 brpop 负责监听 redis 的数据更新队列，有新数据的时候，所有当前用户推送， js 在用户段控制，将新数据 push 到现有数据。

用户端 swoole-charts.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <title>v-charts swoole 动态变更</title>
  6.     <meta charset="UTF-8">
  7. </head>
  9. <body>
  10.     <div id="app">
  11.         <ve-line :data="chartData"></ve-line>
  12.     </div>
  13.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.     <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  15.     <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/line.min.js"></script>
  16.     <!-- -------------------------------------------------△△△△------------ -->
  17.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
  18.     <script>
  19.         var vm = new Vue({
  20.             el: '#app',
  21.             data: {chartData: {
  22.                 columns: ['日期', '销售额'],
  23.                 rows: [
  24.                     { '日期': '1月1日', '销售额': 123 },
  25.                     { '日期': '1月2日', '销售额': 1223 },
  26.                     { '日期': '1月3日', '销售额': 2123 },
  27.                     { '日期': '1月4日', '销售额': 4123 },
  28.                     { '日期': '1月5日', '销售额': 3123 },
  29.                     { '日期': '1月6日', '销售额': 7123 }
  30.                 ]
  31.             }},
  32.             components: { VeLine }
  33.         });
  35.         if (window.WebSocket) {
  36.             var webSocket = new WebSocket("ws://127.0.0.1:9502");
  37.             webSocket.onopen = function (event) {
  38.                 // webSocket.send("Hello,WebSocket!"); 
  39.             };
  41.             // 新消息来的时候, vue 自身的语法，参考：https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95 
  43.             webSocket.onmessage = function (event) {
  44.                 console.log(JSON.parse(event.data));
  45.                 vm.chartData.rows.push(JSON.parse(event.data));
  46.             }
  47.         } else {
  48.             console.log("您的浏览器不支持WebSocket");
  49.         }
  50.     </script>
  51. </body>
  52. </html>

业务端：swoole-charts.php

  1. <?php
  2. $server = new swoole_websocket_server("0.0.0.0", 9502);
  4. $server->on('workerStart', function ($server, $workerId) {
  5.     $redis = new Swoole\Coroutine\Redis();
  6.     $redis->connect('127.0.0.1', 6379);
  7.     while (true) {
  8.         // brpop 第二个参数 50 表示超时（阻塞等待）时间, blpop 同理，详情建议读文档,对应的 redis 操作是 rpush/lpush key content 
  10.         if (($message = $redis->brpop('data', 50)) === null) {
  11.             continue;
  12.         }
  13.         // var_dump($message); 结果为数组 
  15.         foreach ($server->connections as $fd) {
  16.             echo $message[1] . '--' . gettype($message[1]) . PHP_EOL;
  17.             $server->push($fd, $message[1]);
  18.         }
  19.     }
  20. });
  22. $server->on('open', function ($server, $request) {
  23.     // nothing
  25. });
  27. $server->on('message', function (swoole_websocket_server $server, $request) {
  28.     // nothing
  30. });
  32. $server->on('close', function ($server, $fd) {
  33.     echo "client-{$fd} is closed\n";
  34.     $server->close($fd);
  35. });
  37. $server->start();

效果如图：

2019-02-27-Swoole结合Vuejs实现动态图表变化 - 图1

执行过程如常：php swoole-charts.php 启动服务，开始监听 redis 的 data 队列，然后用户访问到 http://localhost/swoole-charts.html 页面，最开始加载在页面中的数据，然后新起终端，输入 redis-cli 打开 redis，rpush data '{"日期":"1月7日","销售额":358}' … 等，新增的数据推送到 data 队列，然后 swoole 负责读取和推送，vuejs 负责根据数据变化，动态渲染图表

©原创文章

最后恰饭 阿里云全系列产品/短信包特惠购买 中小企业上云最佳选择 阿里云内部优惠券