server & react client websocket

App.js

import React from 'react'
import useWebSocket, { ReadyState } from 'react-use-websocket'

function getStatus(readyState) {
  const connectionStatus = {
    [ReadyState.CONNECTING]: 'Connecting',
    [ReadyState.OPEN]: 'Open',
    [ReadyState.CLOSING]: 'Closing',
    [ReadyState.CLOSED]: 'Closed',
    [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
  }[readyState]

  return connectionStatus
}

function App() {
  const { lastMessage, readyState } = useWebSocket('ws://localhost:8000')
  return (
    <div>
      <p>The WebSocket is currently {getStatus(readyState)}</p>
      {lastMessage ? <span>Last message: {lastMessage.data}</span> : null}
    </div>
  )
}

export default App

server.js

const express = require('express')
const ws = require('ws')

const app = express()
app.get('/', function (req, res) {
    res.send('hello world')
})
const server = app.listen(3000)

const wss = new ws.Server({ noServer: true })
wss.on('connection', connection)
server.on('upgrade', (request, socket, head) => {
    wss.handleUpgrade(request, socket, head, socket => {
        wss.emit('connection', socket, request)
    })
})

function connection(ws) {
    let count = 0
    setInterval(() => {
        count = count + 1
        ws.send(JSON.stringify({ count }))
    }, 100)
}

server.mjs

import { WebSocketServer } from 'ws'
const wss = new WebSocketServer({ port: 8000 })

function connection(ws) {
  let count = 0
  setInterval(() => {
    count = count + 1
    ws.send(JSON.stringify({ count }))
  }, 100)
}

wss.on('connection', connection)