Skip to content
This repository was archived by the owner on Jun 18, 2025. It is now read-only.
This repository was archived by the owner on Jun 18, 2025. It is now read-only.

Accessing this.$socket from Vuex actions #91

Closed
Closed
Accessing this.$socket from Vuex actions#91
Labels
question 🤔Further information is requested
@etcogit

Description

@etcogit
etcogit
opened on Jun 13, 2018

Hi,

In my project's folder structure I splitted my Vuex actions (and also mutations, getters and state) into separate files, like suggested here.

Here is an example of an action.js file:

export const saveUserLog = ({ commit, rootState }, data) => {
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  this.$socket.emit('saveUserLog', data) // this doesn't work
}

How can I access to the $socket instance from within my action ?

I tried

export const saveUserLog = ({ commit, rootState, Vue }, data) => { // adding Vue here
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  Vue.$socket.emit('saveUserLog', data) // to access from here
}

and like suggested in this post

export const saveUserLog = ({ commit, rootState }, data) => {
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  this._vm.$socket.emit('saveUserLog', data) // doesn't work
}

Can you help me?
Thanks

Activity

probil
added
question 🤔Further information is requested
on Jun 14, 2018
probil

probil commented on Jun 14, 2018

@probil
probil
on Jun 14, 2018 · edited by probil
Owner

Hi, @etcogit ✋
I'm glad to see an issue from you again. 👍

Currently there few approaches.

  1. Put socket.io instance to the separate file and import it in your actions or any other place of your app. For example:
// --- file: socket-instance.js --- //
import io from 'socket.io-client';

export default io('http://socketserver.com:1923'); // <-- use your socket server here and configuration
// --- file: main.js  --- //
import VueSocketio from 'vue-socket.io-extended';
import $socket from './socket-instance';

Vue.use(VueSocketio, $socket);
// --- file: store/showcase/actions.js  --- //
import $socket from './socket-instance'; //

export const saveUserLog = ({ commit, rootState }, data) => {
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  $socket.emit('saveUserLog', data) // this doesn't work
}
  1. You common function for actions instead of arrow function. Because this in arrow function is not what we actually need. Vuex can't bind vuex module as this if arrow function is used. E.g. this should work:
export function saveUserLog ({ commit, rootState }, data) {
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  this._vm.$socket.emit('saveUserLog', data) // doesn't work
}

Those approaches i not perfect. Currently I'm trying to figure out how to make socket usage in actions simplier. If someone has any idea I will be glad to hear and discuss. 🤝

@etcogit let me know if that helped you.

KingKnecht
mentioned this on Jun 19, 2018
probil

probil commented on Jun 20, 2018

@probil
probil
on Jun 20, 2018
Owner

Closing because of inactivity

probil
closed this as completedon Jun 20, 2018
xino1010

xino1010 commented on Dec 5, 2018

@xino1010
xino1010
on Dec 5, 2018

Thanks @probil

douira

douira commented on Mar 5, 2019

@douira
douira
on Mar 5, 2019

I've seen other WebSocket libraries solve this problem by putting the socket instance on the global Vue object something like this: Vue.$socket.
Is this still even a problem or is has this already been solved with something like Vue.$socket?

quietcoolwu

quietcoolwu commented on Mar 7, 2019

@quietcoolwu
quietcoolwu
on Mar 7, 2019 · edited by quietcoolwu

@probil I wonder how can we set a header for auth, on the connection of socket instance (and not in the static config of instance), here's my instance config

export default io(
  `${location.protocol}//${location.hostname}:${API_PORT}/${namespace}`,
  {
    path: '/socket_io_api',
    // disable auto-connect to bind connect/disconnect with user xhr login/logout
    autoConnect: false,
    transportOptions: {
      polling: {
        extraHeaders: {
          Authorization: `JWT ${localStorage.authToken}`,
        },
      },
    },
  });

Seems that headers must be fixed and can't update with variable, , and now it will just send sth like JWT undefined in handshaking because localStorage.authToken === undefined when we define the socket.io instance, and localStorage.authToken will only be updated to a valid token after user login auth finished.

douira

douira commented on Mar 7, 2019

@douira
douira
on Mar 7, 2019 · edited by douira

Seems that headers must be fixed and can't update with variable, , and now it will just send sth like JWT undefined in handshaking because localStorage.authToken === undefined when we define the socket.io instance, and localStorage.authToken will only be updated to a valid token after user login auth finished.

You're not updating the Authorization field here at all though. Once the file has been run, the field will not change because the code is only run once on import.

quietcoolwu

quietcoolwu commented on Mar 8, 2019

@quietcoolwu
quietcoolwu
on Mar 8, 2019

@douira does that mean I cannot check the socket.io connection for auth on the serverside for all? My target is to check each client connection handshake from the headers.

douira

douira commented on Mar 8, 2019

@douira
douira
on Mar 8, 2019 via email
quietcoolwu

quietcoolwu commented on Mar 24, 2019

@quietcoolwu
quietcoolwu
on Mar 24, 2019 · edited by quietcoolwu

@probil @douira
could you gimme a specific example on how to use an event handler for token auth?
If I import $socket from an outer instance which is kind of pre-configuired, how can I get the header via localStorage or vuex getters, which may vary and add the header to this instance? and which event should I bind the auth procedure?

probil
mentioned this on May 9, 2019
probil
mentioned this on Jul 28, 2019
probil
mentioned this on Apr 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    question 🤔Further information is requested

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @probil@xino1010@quietcoolwu@douira@etcogit

        Issue actions
          Accessing this.$socket from Vuex actions · Issue #91 · probil/vue-socket.io-extended