Как добавить прослушивание веб-сокетов к серверу, развернутому для обычных HTTP-запросов?

Question

[Svetlana_Ilina]

Появилось желание собрать какой то свой чат, я учу веб и в тонкостях бэкенда пока что не особо, собрала свой небольшой сервер, как к нему прикрутить вебсокеты и возможно ли это?

const PORT = process.env.PORT || 5000
const app = express()

app.use(express.json())
app.use(cookieParser())
app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL,
  })
)
app.use(bodyParser.json())
app.use('/api', router)
app.use(errorMiddleware) 

const start = async () => {
  try {
    await mongoose.connect(process.env.DB_URL, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    app.listen(PORT, () => console.log(`Server started on PORT = ${PORT}`))
  } catch (error) {
    console.log(error)
  }
}

start()

Comments

[Andrei SunnyPh]

Если бы сервер был на ASP.NET, то можно было бы сделать чат на SignalR, это обертка над веб-сокетами и не только над ними....А клиентская часть там на javascript. Вот плейлист с демонстрацией проекта с чатом. Так что стек ASP.NET+SignalR+React, в таком случае подойдет.

[Svetlana_Ilina]

только закончила этот настраивать, хотелось бы уже его доделать, что то следующее попробую на ASP собрать)

[Svetlana_Ilina]

вдруг кому то будет интересно или нужно

const express = require('express')
const socketIo = require('socket.io')
const bodyParser = require('body-parser')
const cors = require('cors')
const cookieParser = require('cookie-parser')
require('dotenv').config()
const mongoose = require('mongoose')
const router = require('./router/index')
const errorMiddleware = require('./middlewares/error-middleware')
const http = require('http')
const WebSocket = require('ws')
const { handleWebSocketConnection } = require('./websockets/socket-controller')

const PORT = process.env.PORT || 5000
const app = express()

app.use(express.json())
app.use(cookieParser())
app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL,
  })
)
app.use(bodyParser.json())
app.use('/api', router)
const server = http.createServer(app)
const wss = new WebSocket.Server({ server, path: '/api/messages' })
app.use(errorMiddleware)

wss.on('connection', handleWebSocketConnection)

const start = async () => {
  try {
    await mongoose.connect(process.env.DB_URL, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    server.listen(PORT, () => console.log(`Server started on PORT = ${PORT}`))
  } catch (error) {
    console.log(error)
  }
}

start()

const handleWebSocketConnection = (ws) => {
  console.log('New WebSocket connection')

  ws.on('message', (message) => {
    console.log(`Received WebSocket message: ${message}`)
  })

  ws.send('WebSocket connection established!')
}

module.exports = { handleWebSocketConnection }

единственное что почему то завелся с 10 раза, возможно проблема в том что монгодб сейчас только через впн доступно

Answer 1

[Дмитрий Беляев]

https://nodejs.org/dist/latest-v20.x/docs/api/http...

const PORT = process.env.PORT || 5000
const app = express()
const server = http.createServer(app)
server.on('upgrade', (req, socket) => {
  // здесь websocket, можно использовать пакет ws
})

server.listen(PORT, () => console.log(`Server started on PORT = ${PORT}`))

Comments

[Svetlana_Ilina]

если это в таком виде должно быть, то подключиться не получается

const PORT = process.env.PORT || 5000

const app = express()

const server = http.createServer(app)
const wss = new ws.Server({ server: server, path: '/messages' })

server.on('upgrade', (request, socket, head) => {
  wss.on('connection', (socket) => {
    console.log('New WebSocket connection')

    socket.on('message', (message) => {
      console.log(`Received message: ${message}`)
    })
  })
})

const socket = new WebSocket('ws://localhost:5000/messages')

WebSocket connection to 'ws://localhost:5000/messages' failed

[Дмитрий Беляев]

Svetlana_Ilina, ws сам подпишется на upgrade, на его событие connection нужно на верхнем уровне подписываться.
А насчет падающего коннекшена, надо смотреть что в браузере происходит на вкладке network, подозреваю что рукопожатие нормально не проходит

[Svetlana_Ilina]

Дмитрий Беляев, чуть по другому выше уже сделала, спасибо)