Nuxt•2mo ago

Pinia store socket.io error

Hi, I want to store my socket.io connection in pinia store. This is my code:

import { io } from 'socket.io-client';

export const useWebsocketStore = defineStore('websocketStore', {
  state: () => ({
    isConnected: false,
    socket: null,
  }),
  actions: {
    init() {
      this.socket = io();
      this.bindEvents();
    },
    bindEvents() {
      if (this.socket) {
        this.socket.on("connect", () => {
          this.isConnected = true;
        });

        this.socket.on("disconnect", () => {
          this.isConnected = false;
        });

        this.socket.on("error", (error) => {
          console.log(error);
        });
      }
    },
  },
});

import { io } from 'socket.io-client';

export const useWebsocketStore = defineStore('websocketStore', {
  state: () => ({
    isConnected: false,
    socket: null,
  }),
  actions: {
    init() {
      this.socket = io();
      this.bindEvents();
    },
    bindEvents() {
      if (this.socket) {
        this.socket.on("connect", () => {
          this.isConnected = true;
        });

        this.socket.on("disconnect", () => {
          this.isConnected = false;
        });

        this.socket.on("error", (error) => {
          console.log(error);
        });
      }
    },
  },
});

but I am getting this error: Cannot stringify arbitrary non-POJOs what to do please?

4 Replies

Melvin•2mo ago

Nuxt / Pinia stringifies JSON before sending data from the server to the client. It seems like the socket has functions that cannot be strinigified Making sure this only happens on the client should solve the problem

Rush•2mo ago

how can i do that? i tried rename it to websocket.client.ts but that didnt help

Melvin•2mo ago

We have a plugin that sets the socket connection and stores it in pinia store, that works. Otherwise you should figure out how to have a pinia store initted only on the client IDK the exact details but Pinia has great documentation on their website

Rush•2mo ago

so should i just use pinia store as a variable and save the connection there in the plugin? and plugins will always be client side rendered? I created a client side plugin and it seems to work, it just gives me an error that the socket can be null. Is there a way around it so I don't have to check everywhere that the socket exists?

Gaming

Programming

Pinia store socket.io error