NUXT (SSR Mode) 连接 Laravel Pusher Socket答案

【问题标题】：NUXT (SSR Mode) connect Lavarel Pusher SocketNUXT (SSR Mode) 连接 Laravel Pusher Socket
【发布时间】：2020-07-27 07:23:25
【问题描述】：

我想将 Laravel Pucher Socket 连接到 NUTX.js（SSR 模式）应用程序。
以上代码添加了socket socketio.js插件文件。此代码不起作用。任何人都告诉我有什么问题。 NUXT SSR模式下如何连接Socket。

import Echo from "laravel-echo";
import config from "../config/config.global";



export default async ({ store, $axios }) => {
  const port = 6001;

  window.io = require("socket.io-client");
  window.Pusher = require("pusher-js");
  
  console.log(typeof io, "socketIO");
  if (typeof io !== "undefined") {
    // connect to web socket
    try {
      window.Echo = new Echo({
        broadcaster: "pusher",
        key: config.secretKey, 
        wsHost: config.socketUrl,
        wsPort: port,
        disableStats: true,
        auth: {
          headers: config.header
        }
      });
      console.log("connect to socket");
    } catch (error) {
      console.log(error.message);
    }
  }

  function listenStock({ channelName, eventName }, callback) {
    console.log("callback",callback);
    window.Echo.channel(channelName).listen(eventName, callback);
  }
  // Get user Balance Socket
  listenStock(
    {
      channelName: `BalanceUpdateEvent.${store.getters.GetUserUUID}`,
      eventName: "BalanceUpdateEvent"
    },
    ({ data }) => {
      try {      
        console.log(data,"Data");
      } catch (ex) {
        console.log(ex);
      }
    }
  );


};

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

在 Nuxt 中有两种 Mode SPA 和 SSR。

SPA 仅在客户端运行
SSR 运行客户端和服务器端。

所以我创建了有关 laravel echo socket pusher service connect to NUXT Mode 的存储库。

NUXT（SSR 模式）： https://github.com/mankarsandesh/nuxt-socket-laravel-echo-SSR

NUXT（SPA 模式） https://github.com/mankarsandesh/nuxt-socket-laravel-echo-SPA

【讨论】：

很好的解释。