Простой пример того, как использовать веб-сокеты между клиентом и сервером

Question

Я новичок в веб-сокетах и ​​просто пытаюсь понять, как прослушивать сообщение из клиентского браузера с сервера и наоборот.

Я использую Node.js / Expressя просто хочу иметь возможность сначала прослушивать любые сообщения от клиента.

Я просматривал эту библиотеку https://github.com/websockets/ws и пробовал примеры, но не смог заставить это работатьв моей среде localhost.

Мне также неясно, что мне нужно искать, когда я слушаю сообщение.

Какой код я использую на клиенте, т.е.URL + порт и какой код я использую на сервере?

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost/path', {
  perMessageDeflate: false
});

Answer 1

Использование websockets напрямую может быть проблематичным, рекомендуется использовать каркас для абстрагирования этого слоя, чтобы они могли легко переходить к другим методам, когда они не поддерживаются в клиенте.Например, это прямая реализация, использующая Express js и Websockets напрямую.Этот пример также позволяет вам использовать тот же сервер для HTTP-вызовов.

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();

//initialize a simple http server
const server = http.createServer(app);

//initialize the WebSocket server instance
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {

    //connection is up, let's add a simple simple event
    ws.on('message', (message) => {

        //log the received message and send it back to the client
        console.log('received: %s', message);
        ws.send(`Hello, you sent -> ${message}`);
    });

    //send immediatly a feedback to the incoming connection    
    ws.send('Hi there, I am a WebSocket server');
});

//start our server
server.listen(3000, () => {
    console.log(`Server started on port ${server.address().port} :)`);
});

Для клиента вы можете сделать что-то вроде этого:

const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
  console.log('ws opened on browser')
  ws.send('hello world')
}

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

Как я уже говорил выше, этоРекомендуется использовать зрелый фреймворк для веб-сокетов .Если ваше приложение минимально и не требует масштабирования, вы можете использовать любую библиотеку с открытым исходным кодом, наиболее популярной является socket.io .

Однако, если вы говорите о реализации этой возможности,При использовании на производственном уровне вы должны знать, что решения с открытым исходным кодом не допускают масштабируемости, отработки отказа, упорядочения сообщений и т. д. В этом случае вам придется реализовать платформу реального времени в качестве инструмента обслуживания. Сеть потоков данных Ably - одно из таких решений, которое я лично использовал для многих своих проектов.

Answer 2

Просто примечание, socket.io - это библиотека бэкэнда / внешнего интерфейса, которая использует websocket, но также имеет ряд резервных вариантов, если браузер клиента не поддерживает websocket.Пример ниже работает с ws backend.

Сервер

const WS = require('ws')

const PORT = process.env.PORT || 8080

const wss = new WS.Server({
  port: PORT
}, () => console.log(`ws server live on ${PORT}`))

const errHandle = (err) => {
  if(err) throw err
}

wss.on('connection', (socket) => {
  console.log('something connected')

  socket.send('you are connected', errHandle)

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

    socket.send('message received', errHandle)
  })
})

клиент (браузер)

(() => {
  const ws = new WebSocket('ws://localhost:8080')
  ws.onopen = () => {
    console.log('ws opened on browser')
    ws.send('hello world')
  }

  ws.onmessage = (message) => {
    console.log(`message received ${message}`)
  }

})()

edit: oh, ws иhttp разные протоколы.вам понадобится другой сервер для обслуживания ваших http файлов