en realidad estoy tratando de crear una aplicación de chat usando vueJS y socket.io, así que esto es lo que he hecho hasta ahora
<script> import {io} from "socket.io-client"; export default { data() { return { socketInstance: io("http://localhost:3001"), }; }, methods: { async handleSendMessage(message) { const postParams = { ip: this.userData.ip, message: message, user_type: "customer", }; const {data} = await axios.post( "http://localhost:3001/api/message", postParams ); this.messages.push(data.message); this.socketInstance.broadcast.emit("new_message", { message: data.message, socket_id: this.socketInstance.id, }); //HERE AM GETTING ERROR WHILE USING BROADCAST } }, mounted() { this.socketInstance.on("new_message", ({message, socket_id}) => { if (message.ip == this.userData.ip) { this.messages.push(message); } }); }, }; </script>
Básicamente, la función handleSendMessage es responsable de enviar un mensaje y emitir un evento, pero cuando lo hago
this.socketInstance.emit("new_message", { message: data.message, socket_id: this.socketInstance.id, });
entonces funciona bien, pero como saben, recibiré mensajes duplicados, así que usé
this.socketInstance.broadcast.emit("new_message", { message: data.message, socket_id: this.socketInstance.id, });
y obtuve el siguiente error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'emit')
No sé por qué estoy recibiendo este error. Perdón por mi mal ingles.
Está escrito en la documentación de socket.io de la siguiente manera:
Tenga en cuenta que la transmisión es una función exclusiva del servidor.
.broadcast
solo se usa en el lado del servidor. Transmite algo a todos los clientes conectados, no de cliente a cliente .
Documentación relacionada