Soy nuevo en websockets y para mi proyecto estoy usando Socket.io. lo que estoy tratando de lograr es tener dos toques y cuando un usuario hace clic en el botón showDiv, el div se mostrará a todos los usuarios conectados. tengo conexión con el servidor y puedo ver si un usuario está conectado, pero tratar de implementar mi idea en vue es lo más difícil para mí.

Si puedes ayudar a entender esto, te lo agradecería mucho y gracias.

 new Vue({ el:'#wrapper', data:{ display: false, joined: false, }, methods:{ join() { this.joined = true; this.socketInstance = io("http://localhost:3000"); this.socketInstance.on( "show", (data) => { this.display = this.display(data); } ) }, show(){ const display = this.display if (display == false) { this.display = true this.socketInstance.emit('showDiv', display) }else { this.display= false } }, }, mounted() { this.join(); }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="wrapper"> <h1 v-if="joined">We are connected</h1> <h1 v-else>We are not connected</h1> <button @click="show">Show/hide Div</button> <div v-if="display" style="background-color: #4d00ff; width: 100px; height: 100px;"></div> <div v-else>No div to see</div> </div>

Servidor Node.js

 const express = require('express'); const http = require('http'); const { Server } = require('socket.io'); const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { origin: "*", methods: ['GET', "POST"] } }); io.on('connection', (socket) => { console.log(`user ${socket.id} is connected.`) socket.on('message', data => { socket.broadcast.emit('message:received', data) }) socket.on('show', data =>{ socket.broadcast.emit('showDiv',data) }) socket.on('disconnect', () => { console.log(`user ${socket.id} left.`) }) }) server.listen(3000, () => { console.log('App server is running on 3000') })