Connecting Lavarel Pusher Socket in NUXT with SSR Mode

Looking to establish a connection between the Laravel Pusher Socket and NUTX.js (SSR Mode) Application.
The code snippet above adds the socketio.js plugin file, but it seems to be causing some issues. Can anyone point out what might be going wrong? And how can I successfully connect to the Socket in NUXT SSR mode?

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);
      }
    }
  );


};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the process of implementing an SVG icon in your Angular Material project

I'm currently attempting to incorporate a single icon into my Angular Material application. Following the documentation, I have implemented $mdIconProvider in the following manner: app.config(function($stateProvider, $urlRouterProvider, $mdIconProvid ...

Update the image source every few seconds

I am attempting to show the same image in both gif (animated) and jpeg formats. I am updating the src every few seconds. After checking in the developer tools, it seems that the src has been modified, but the gif does not appear to be animating. setInter ...

What is the best way to manage URL data between a domain and hashtag using Vue Router?

I am currently developing a project using vue-cli, vue router, and node.js. The routing in Vue is set to hash mode so that users can easily navigate to specific pages by copying and pasting URLs or typing from memory without encountering any errors. Howeve ...

What is the best way to update the displayed data when using Mobx with an observable array?

Is there a way to re-render observable array data in Mobx? I have used the observer decorator in this class. interface IQuiz { quizProg: TypeQuizProg; qidx: number; state: IStateCtx; actions: IActionsCtx; } @observer class Comp extends Rea ...

What is the best way to assign a value to a button in Ionic/Angular?

Is there a way to bind the name and value attributes to a button? I am facing an issue with this and need a solution. I am attempting to achieve the following: <ion-button type="submit" color="primary" style="text-align:center& ...

Generating a JavaScript array using concealed data

var a1=$("#orderprogress").val().toFixed(2);//a1=50 var a2=$("#poprogress").val().toFixed(2); //a2=70 If I were to create an array in this format, how should I proceed? graphData = new Array( [a1 value,'#222222'],//[50,'#22222 ...

TypeAhead.js and Bloodhound displaying an uneven quantity of search outcomes

I have a frontend setup with TypeAhead and Bloodhound integration, fetching JSON data from a Play/Scala server. The version of Typeahead being used is 0.11.1. Here is how the implementation looks: HTML: <div id="typeahead" class="col-md-8"> < ...

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Currently, I am facing an issue while trying to set up jest and nodemon for my nodejs project. My development environment includes vscode, npm version 6.13.7, and node version 13.8.0. Whenever I try to install nodemon via the command line, the console disp ...

Conceal a div once the user scrolls to a certain position using vanilla JavaScript

As a beginner in the field of web development, I am currently working on creating a blog website. Code Function - One of the challenges I'm facing is implementing a floating pagination bar that needs to be hidden when a visitor scrolls near the foote ...

Spacing in a vertical orientation with Vuetify

Feeling like it's 11/10 chance that it's just too late in the day and my brain is in idiot mode, but let's give it a shot... So, I have a list of navigation links (v-list-item in a v-list) ... I'm attempting to make one of the links s ...

Issue: EACCES error encountered while attempting to execute bower install operation

After running bower install css-circle-menu, I encountered the following error: /usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:54 throw err; ^ Error: EACCES: permission denied, open '/Users/ja ...

Initiate an Ajax call to pre-fetch video content

I've been attempting to download a video from my own source and display a loading message while it's being downloaded. Once the download is complete, I want to hide the loading icon and have the video ready for playback. My issue lies in gettin ...

Empty MongoDB array persists even after POST request

After performing a POST request in Insomnia, my "games" array remains empty. What am I missing? UPDATE: New error after array.push({}) "errorValidationError: games.0.gameID: Path gameID is required., games.0.isGameActivated: Path isGameActivated is requi ...

How can an object with a computed property be passed to a child component?

<template> child-component( v-for="item in items" :item="item" ) </template> <script> data() { return { items: [], valueFromApi: null, } }, computed: { someCompProp() { return val // math based o ...

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

$(document).ready(function () { $("#end").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function () { var start = $('#start'); var startDate = $(this).datepicker('getDate') ...

Steps for displaying a customized view within an NPM module:

Given that pushAsset prohibits loading external resources, I am interested in displaying this template/script from my NPM module: views/tag.html <script async src="https://www.googletagmanager.com/gtag/js?id={{ data.gid }}"></script> NPM mod ...

Utilize jQuery and JavaScript dynamically in an HTML document on iOS devices

Having some trouble with this code snippet and getting it to work as intended. - (void)viewDidLoad { [super viewDidLoad]; _webview.delegate = self; [_webview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBun ...

What is the best way to manage data that arrives late from a service?

Within my Angular application, I have a requirement to store data in an array that is initially empty. For example: someFunction() { let array = []; console.log("step 1"); this.service.getRest(url).subscribe(result => { result.data.forEach( ...

Refresh the div based on the script's output

Currently, I am struggling to make a password change form work properly as I have limited knowledge of jQuery. The form successfully changes the password, but there is no visual feedback for the user. When I submit the form, it routes to changePassword.php ...