一、后端代碼

需求：后端定時(shí)推送數(shù)據(jù)給客戶端。

1、webman 新建 process/Websocket.php自定義監(jiān)聽(tīng)進(jìn)程文件

<?php
namespace process;

use Workerman\Connection\TcpConnection;
use Workerman\Timer;

/***
 * 開(kāi)啟一個(gè)websocket
 * Class Export
 * @package process
 */
class Websocket
{
    public function onConnect(TcpConnection $connection){}

    public function onWebSocketConnect(TcpConnection $connection, $http_buffer){}

    public function onMessage(TcpConnection $connection, $data)
    {
        $data = json_decode($data, true);

        Timer::add(1, function() use ($data){
            // >>>>>>>>>>>>>>>>>>>>>>>
            // 處理代碼業(yè)務(wù)
            // >>>>>>>>>>>>>>>>>>>>>>>

            // 發(fā)送數(shù)據(jù)  $return_ret 推送的數(shù)據(jù)
            $connection->send(json_encode($return_ret));
        });
    }

    public function onClose(TcpConnection $connection)
    {
        // 關(guān)閉websocket
        $connection->close();
    }
}

2、webman 在 config/process.php中添加如下配置

return [
    // 文件更新檢測(cè)
    'monitor' => [
        'handler'     => process\FileMonitor::class,
        'reloadable'  => false,
        'constructor' => [
            // 監(jiān)控這些目錄
            'monitor_dir' => [
                app_path(),
                config_path(),
                base_path() . '/process',
                base_path() . '/support',
                base_path() . '/resource',
                base_path() . '/.env',
            ],
            // 監(jiān)控這些后綴的文件
            'monitor_extensions' => [
                'php', 'html', 'htm', 'env'
            ]
        ]
    ],
    'Websocket'  => [
        'handler'  => process\Websocket::class,
        'listen'  => 'websocket://0.0.0.0:2233',
        'count'   => 1,
    ],
];

二、vue客戶端配置

需求：想要在vue單頁(yè)面應(yīng)用全局使用 websocket，所以封裝了一個(gè)websocket.js文件，以便全局引入調(diào)用

1、websocket.js文件

var websock = null;

var global_callback = null;
var serverPort = "2233"; // webSocket連接端口
var wsuri = "ws://127.0.0.1:" + serverPort;

function createWebSocket(callback) {

  if (websock == null || typeof websock !== WebSocket) {
    initWebSocket(callback);
  }
}

function initWebSocket(callback) {
  global_callback = callback;
  // 初始化websocket
  websock = new WebSocket(wsuri);
  websock.onmessage = function (e) {
    websocketonmessage(e);
  };
  websock.onclose = function (e) {
    websocketclose(e);
  };
  websock.onopen = function () {
    websocketOpen();
  };

  // 連接發(fā)生錯(cuò)誤的回調(diào)方法
  websock.onerror = function () {
    console.log("WebSocket連接發(fā)生錯(cuò)誤");
    //createWebSocket();啊，發(fā)現(xiàn)這樣寫(xiě)會(huì)創(chuàng)建多個(gè)連接，加延時(shí)也不行
  };
}

// 實(shí)際調(diào)用的方法
function sendSock(agentData ) {

  if (websock.readyState === websock.OPEN) {
    // 若是ws開(kāi)啟狀態(tài)
    websocketsend(agentData);
  } else if (websock.readyState === websock.CONNECTING) {
    // 若是 正在開(kāi)啟狀態(tài)，則等待1s后重新調(diào)用
    setTimeout(function () {
      sendSock(agentData);
    }, 1000);
  } else {
    // 若未開(kāi)啟 ，則等待1s后重新調(diào)用
    setTimeout(function () {
      sendSock(agentData);
    }, 1000);
  }
}

function closeSock() {
  websock.close();
}

// 數(shù)據(jù)接收
function websocketonmessage(msg) {
  // console.log("收到數(shù)據(jù)："+JSON.parse(e.data));
  // console.log("收到數(shù)據(jù)："+msg);

  // global_callback(JSON.parse(msg.data));

  // 收到信息為Blob類(lèi)型時(shí)
  let result = null;
  // debugger
  if (msg.data instanceof Blob) {
    const reader = new FileReader();
    reader.readAsText(msg.data, "UTF-8");
    reader.onload = (e) => {
      result = JSON.parse(reader.result);
      //console.log("websocket收到", result);
      global_callback(result);
    };
  } else {
    result = JSON.parse(msg.data);
    //console.log("websocket收到", result);
    global_callback(result);
  }
}

// 數(shù)據(jù)發(fā)送
function websocketsend(agentData) {
  console.log("發(fā)送數(shù)據(jù)：" + agentData);
  websock.send(agentData);
}

// 關(guān)閉
function websocketclose(e) {
  console.log("connection closed (" + e.code + ")");
}

function websocketOpen(e) {
  console.log("連接打開(kāi)");
}

export { sendSock, createWebSocket, closeSock };

2、在app.vue創(chuàng)建websocket鏈接

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
import { createWebSocket } from "@/libs/websocket";
export default {
  name: 'app',
  created () {
    // 鏈接websocket
    createWebSocket();
  }
}
</script>

3、在其他單頁(yè)面接受服務(wù)端數(shù)據(jù)

<template>
  <div></div>
</template>
import { createWebSocket, sendSock } from "@/libs/websocket";
export default {
  name: 'app',
  created () {
    // 鏈接websocket
    createWebSocket();
  },
  mounted() {
    // 發(fā)送websocket信息給服務(wù)器
    let sendData = {
      type: 'task',
      uid: this.info.admin.admin_id
    };
    sendSock(JSON.stringify(sendData));
    createWebSocket(this.socketGlobalCallback);
  },
  methods: {
    // 接受服務(wù)端數(shù)據(jù)
    socketGlobalCallback(msg){
      console.log('接受服務(wù)端數(shù)據(jù)', msg)
      // 賦值

    },
  }
}
</script>

三、客戶端退出登錄時(shí)關(guān)閉websocket

在注銷(xiāo)登錄組件中引入文件

import { closeSock } from "@/libs/websocket";

在注銷(xiāo)事件中調(diào)用關(guān)閉websocket的方法closeSock

closeSock()