Unable to perform WebSocket communication using Socket.IO.Client

Want To Do

  • Performe WebSocket using Socket.IO.Client
  • Same thing as following code
  • The code below connects to the WebSocket, receives a message, then sends it and disconnects from the socket.

index.html

<a>Open the console to see stuff, then refresh to initiate exchange.</a>
<script src='script.js'></script>

script.js


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

socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});


setTimeout(() => {
    const obj = { hello: "world" };
    const blob = new Blob([JSON.stringify(obj, null, 2)], {
      type: "application/json",
    });
    console.log("Sending blob over websocket");
    socket.send(blob);
}, 1000);

setTimeout(() => {
    socket.send('About done here...');
    console.log("Sending close over websocket");
    socket.close(3000, "Crash and Burn!");
}, 3000);

Problem I’m having

The following is the code I wrote

  const socket = io('ws://127.0.0.1:3000');
  console.log("socket, ", socket);
  socket.on('connect', () => {
    socket.emit('message', 'Hello Server!');
  });

  socket.on('message', (data) => {
      console.log('Message from server ', data);
  });

  setTimeout(() => {
      const obj = { hello: "world" };
      console.log("Sending blob over websocket");
      socket.emit('message', obj);
  }, 1000);

  setTimeout(() => {
      socket.emit('message', 'About done here...');
      console.log("Sending close over websocket");
      socket.close();
  }, 3000);

I think I cannot connect to server.
Following is a Warning

  connected: false,
  recovered: false,
  receiveBuffer: [],
  sendBuffer: [],
  _queue: [],
  _queueSeq: 0,
  ids: 0,
  acks: {},
  flags: {},
  io: Manager {
    nsps: { '/': [Circular *1] },
    subs: [
      [Function: subDestroy],
      [Function: subDestroy],
      [Function: subDestroy]
    ],
    opts: {
      path: '/socket.io',
      hostname: '127.0.0.1',
      secure: false,
      port: '3000'
    },
    setTimeoutFn: [Function: bound setTimeout],
    clearTimeoutFn: [Function: bound clearTimeout],
    _reconnection: true,
    _reconnectionAttempts: Infinity,
    _reconnectionDelay: 1000,
    _reconnectionDelayMax: 5000,
    _randomizationFactor: 0.5,
    backoff: Backoff {
      ms: 1000,
      max: 5000,
      factor: 2,
      jitter: 0.5,
      attempts: 0
    },
    _timeout: 20000,
    _readyState: 'opening',
    uri: 'ws://127.0.0.1:3000',
    encoder: Encoder { replacer: undefined },
    decoder: Decoder { reviver: undefined },
    _autoConnect: true,
    engine: Socket {
      writeBuffer: [],
      setTimeoutFn: [Function: bound setTimeout],
      clearTimeoutFn: [Function: bound clearTimeout],
      secure: false,
      hostname: '127.0.0.1',
      port: '3000',
      transports: [Array],
      prevBufferLen: 0,
      opts: [Object],
      id: null,
      upgrades: null,
      pingInterval: null,
      pingTimeout: null,
      pingTimeoutTimer: null,
      readyState: 'opening',
      transport: [Polling],
      _callbacks: [Object]
    },
    skipReconnect: false,
    _callbacks: {
      '$open': [Array],
      '$packet': [Array],
      '$error': [Array],
      '$close': [Array]
    }
  },
  nsp: '/',
  _opts: {
    path: '/socket.io',
    hostname: '127.0.0.1',
    secure: false,
    port: '1919'
  },
  subs: [
    [Function: subDestroy],
    [Function: subDestroy],
    [Function: subDestroy],
    [Function: subDestroy]
  ]
}

How to connect to server ?
The path section contains socket.io. Is that part the problem?