websocket 2

💼 Упражнение 2️⃣

⏪

Для получения некоторого экспириенса с веб-сокетами нам придется познакомиться с серверным JS

Не забудьте создать отдельную папку для наших экспериментов и перейти в нее

Итак, платформа Node.js станет основой нашего приложения

В Node.js нет встроенной поддержки WebSocket, поэтому установим плагин ws

Установка

$ npm install ws

Теперь создадим вебсокет-сервер

Для этого нам нужен серверный скрипт

Создадим файл start.js

В Node.js все файлы, включаемые в приложение - это отдельные модули

Чтобы подключить модуль к исполняемому скрипту, необходимо использовать функцию require

Нам нужно подключить модуль ws, который мы уже установили:

const socket = require('ws')

Теперь этот модуль доступен нам под именем socket

С его помощью мы и создадим WebSocket сервер на порту 8080

server

const server = new WebSocket
    .Server({
        port: 8080
    })

Теперь в переменной server у нас ссылка на объект WebSocket-сервера

Используя событие connection WebSocket-сервера,

создадим обработчика события message объекта socket

Обработчик будет отсылать в ответ на полученное сообщение JSON-строку

с именем отправителя "server" и текстом "I listen to you",

а затем выводить в консоль полученное от клиента сообщение:

server.on ( 'connection', socket => {
    socket.on ( 'message', received => {
        socket.send(
            JSON.stringify ( {
                name: "server",
                message: "I listen to you"
            } )
        )
        let mess = JSON.parse ( received )
        console.log (
            `received from a client:
                ${mess.user.name}
                ${mess.message}`
        )
    })
})

Итак, серверный скрипт готов, сохраним его в файл start.js

start.js

const WebSocket = require('ws')

const server = new WebSocket
    .Server({
        port: 8080
    })

server.on ( 'connection', socket => {
    socket.on ( 'message', received => {
        socket.send(
            JSON.stringify ( {
                name: "server",
                message: "I listen to you"
            } )
        )
        let mess = JSON.parse ( received )
        console.log (
            `received from a client:
                ${mess.name}
                ${mess.message}`
        )
    })

и запустим с помощью консольной команды:

$ node start.js

Теперь откроем новую вкладку и введем в адресной строке браузера: http://localhost:8080/

На странице появится сообщение Upgrade Required

Это потому, что мы указали протокол http, а запущенный нами на порту 8080 сервер работает по протоколу ws

В консоли этой вкладки введем "клиентский" код:

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

socket.addEventListener( 'open', () => {
    socket.send(
        JSON.stringify ({
            name: "Admin",
            message: 'Hello, do you listen to me ?'
        })
    )
})

socket.addEventListener( 'message', event => {
    console.log ( JSON.parse ( event.data ) )
})

поскольку мы создаем сервер на локальной машине,

домен будет localhost или 127.0.0.1

порт мы уже выбрали - 8080

После выполнения кода:

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

в переменной socket у нас будет ссылка на экземпляр WebSocket-соединения,

у которого есть событие open и метод send

( как видим, события и методы на стороне сервера и клиента одни и те же,

поскольку это соединение двух "равноправных" партнеров для обмена сообщениями )

Итак, когда соединение будет открыто, клиент

( пока из консоли браузера )

отправит на сервер сообщение - JSON-строку

с именем отправителя "Admin" и текстом "Hello, do you listen to me ?"

Результат в консоли

$ node start.js received from a client: Admin Hello, do you listen to me ?

Результат в консоли браузера

▼ { name: "server", message: "I listen to you" } message: "I listen to you" name: "server" ► __proto__: Object

---

⏪