Как решить проблему с WebSockets?

Question

[vlad1753]

Приветствую.

Весьма странная ситуация. Первый раз использую веб сокеты.
При загрузке страницы клиент отправляет запрос на сервер.
Странность в том, что при первой загрузке страницы евент connection на бэкенде срабатывает 2 раза.
Вторая перезагрузка - 3 раза
Третья - 4 раза

Видео: https://www.recordjoy.com/view/V40Nzn77pFoShjC8O4H7

В чём причина???

Клиент:

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

const id = window.location.pathname.split('/')[2]

ws.onopen = () => {
        
    const message = {
        event: "transition",
        id
    }

    ws.send(JSON.stringify(message))

}

ws.onmessage = (message) => {
    console.log(message.data)
}

ws.onerror = (err) => {
    console.log(err)
}

window.onbeforeunload = () => {
    ws.close()
}

Сервер (это middleware в express):

import { WebSocketServer } from 'ws'
import linkService from '../services/link.js'
import transitionService from '../services/transition.js'


const wss = new WebSocketServer({ port: 8080 })

export default function(req, res, next){


 
    wss.on('connection', ws => {
        console.log('connection')
        
        if(req.autorized){
            ws.clientID = req.user._id
        }

        
        ws.on('message', async (message)=>{

            const data = JSON.parse(message.toString())


            switch (data.event) {
                case "transition":
                    const linkData = await linkService.saveFollowData(req.socket.remoteAddress, req.get('user-agent'), data.id)
                    wss.clients.forEach(c => {
                        if(c.clientID == linkData.user){
                            transitionService.getData(linkData.user).then((data)=>{
                                c.send(JSON.stringify(data))
                            })
                        }
                    })
                    ws.send(linkData.from)
                    break;
            
                default:
                    break;
            }
        })
    })
    next()
}

Comments

[vlad1753]

Rubix,

или всего в консоли столько записей "connection"?

Именно так

[Fedor Vlasenko]

удалите export default function(req, res, next)
и ниже next()
}
Сервер (это middleware в express) - нет

[vlad1753]

Rubix, Вот как это происходит: https://www.recordjoy.com/view/V40Nzn77pFoShjC8O4H7

Answer 1

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

Вы на каждый запрос по http, который обрабатывается Вашим middleware делаете подписку на websocket connection, тем самым плодите обработчики.
У Вас вебсокет вообще никак не связан с http и сидит на отдельном порту.

При желании, кстати можно переиспользовать инстанс http сервера и для express и для websocket, тогда они на одном порту будут.

Comments

[vlad1753]

Да, теперь понятно, спасибо!

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

vlad1753, в конструктор WebSocketServer вместо port можно передать параметр server с инстансом http сервера, если с express вместе, то примерно так будет:

import http from 'http';
import express from 'express';
import { WebSocketServer } from 'ws';

const app = express();
const server = http.createServer(app);
const wss = new WebSocketServer({ server });

server.listen(8888);

[vlad1753]

Дмитрий Беляев, Спасибо большое!