Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Emit to socket from inside vuex store's mutations, actions functions #337

Open
mzaiprog opened this issue Sep 12, 2022 · 1 comment

Comments

@mzaiprog
Copy link

https://lukashermann.dev/writing/socketio-with-vue-and-vuex/

Layed out some way to emit to socket from inside vuex store's action functions. But would it not be nicer to have this feature here? And if it already exists, please add some example code to the docs.

Kind regards.

@mzaiprog
Copy link
Author

mzaiprog commented Sep 13, 2022

From the vue-3-socket.io's source point of view, possibly injecting the socketIO instance into the vuex instance would break the design pattern. So I like to share this small code snippet, that solved my issue by injecting vue-3-socket.io into the vuex store via main.js:

main.js:

import { createApp } from "vue";

import App from "./App";
import store from "./store";
import socket from "./socket";

// inject vue-3-socket.io into the vuex store
store.$socket = socket;

const app = createApp(App);
app.use(store);
app.use(socket);
app.mount("#app"); 

Following is some usage Example:

store.js:

import { createStore } from "vuex";

export default createStore({
    state() {
        return {
            message: "default message",
        };
    },
    mutations: {
        SOCKET_updateMessage(state, message) {
            console.log("SOCKET_updateMessage: message:", message);
            state.message = message;
        },
        updateMessage(state, message) {
            console.log("updateMessage: message:", message);
            this.$socket.io.emit("fromClientStore", "updateMessage", message);
        },
    },
});

socket.js:

import SocketIO from 'socket.io-client';
import VueSocketIO from "vue-3-socket.io";

import store from "./store";

export default new VueSocketIO({
    debug: true,
    connection: SocketIO(),
    vuex: {
        store,
        actionPrefix: "SOCKET_",
        mutationPrefix: "SOCKET_",
    },
});

Express server's index.js:

import http from "http";
import expressCls from "express";
import { Server as SocketIOServer } from "socket.io";

class Server {
    clientSocket = null;

    constructor(port = 80) {
        // define network layer
        console.log("Server.constructor: (define network layer) port:", port);

        this.expressObj = expressCls();
        this.httpServer = http.createServer(this.expressObj);
        this.svrIO = new SocketIOServer(this.httpServer);
        this.svrIO.on("connection", (socket) => {
            console.log("svrIO.on: connection: socket.id:", socket.id);
            this.clientSocket = socket;

            socket.on("fromClientStore", (action, message) => {
                console.log("socket.on: fromClientStore/" + action + ": message:", message);
                server.clientSocket.emit("updateMessage", message);
            });

            socket.on("disconnect", (reason) => {
                console.log("socket.on: disconnect: socket.id:", socket.id, "reason:", reason);
            });
        });

        this.expressObj.use(expressCls.static("client/dist"));
        this.httpServer.listen(port, () => {
            console.log("Open your browser: http://localhost:" + port);
        });
    }
}
const server = new Server();

app.vue:

<template>
    <h1>$store.state.message: {{ $store.state.message }}</h1>
    <button @click.prevent="$store.commit('updateMessage', 'Button pressed')">updateMessage</button>
</template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant