How do I set up WebSockets in a Vue.js application?

How do I set up WebSockets in a Vue.js application?

To set up WebSockets in a Vue.js application, you can use the native WebSocket API or libraries like Socket.IO. Would you like a code example?

Yes, please provide a code example using Socket.IO.

First, install Socket.IO with npm: npm install socket.io-client. Then, in your Vue component, you can do the following:

import io from 'socket.io-client';
const socket = io('http://yourserver.com');

export default {
  mounted() {
    socket.on('message', (data) => {
      console.log(data);
    });
  },
  methods: {
    sendMessage(msg) {
      socket.emit('message', msg);
    }
  }
};

What server-side setup do I need for this to work?

On the server side, you need to set up a Node.js server with Socket.IO. Here's a basic example:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('message', (msg) => {
    io.emit('message', msg);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});