const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('WebSocket is connected');
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('Message from server: ', event.data);
};

socket.onclose = () => {
  console.log('WebSocket is closed');
};

socket.onerror = (error) => {
  console.error('WebSocket error: ', error);
};

<template>
  <div>
    <h1>Realtime Messages</h1>
    <ul>
      <li v-for="message in messages" :key="message">{{ message }}</li>
    </ul>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: [],
      newMessage: ''
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.socket.send(this.newMessage);
        this.newMessage = '';
      }
    }
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080');

    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };
  },
  beforeUnmount() {
    this.socket.close();
  }
};
</script>

npm install socket.io-client

import { io } from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  methods: {
    sendMessage(message) {
      this.socket.emit('chat message', message);
    }
  },
  mounted() {
    this.socket = io('http://localhost:3000');

    this.socket.on('chat message', (msg) => {
      this.messages.push(msg);
    });
  },
  beforeUnmount() {
    this.socket.disconnect();
  }
};

npm install ws

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Client connected');

  socket.on('message', (message) => {
    console.log('Received: ', message);
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

const WebSocket = require('ws');
const jwt = require('jsonwebtoken');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket, req) => {
  const token = req.headers['sec-websocket-protocol'];
  try {
    const decoded = jwt.verify(token, 'your-secret-key');
    console.log('User authenticated:', decoded);
  } catch (err) {
    console.log('Invalid token');
    socket.close();
  }
});

upstream websocket_servers {
  server 127.0.0.1:8080;
  server 127.0.0.1:8081;
}

server {
  listen 80;

  location / {
    proxy_pass http://websocket_servers;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}