websocket

🎓 WebSocket

WebSockets API позволяет веб-приложениям использовать протокол WebSockets для двусторонней связи с удаленным хостом

WebSockets, как и Local Storage и Geolocation, изначально был частью спецификации HTML5

Cогласно спецификации протокола, соединение WebSocket стартует как HTTP-соединение, гарантируя полную обратную совместимость с миром до WebSocket

Переключение протокола с HTTP на WebSocket называется рукопожатием ( handshake ) WebSocket

При отправке запроса на сервер браузер с помощью заголовка Upgrade сообщает, что он хочет переключиться с протокола HTTP на WebSocket:

Request Headers

Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9,ru;q=0.8 Cache-Control: no-cache Connection: Upgrade Host: echo.websocket.org Origin: null Pragma: no-cache Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits Sec-WebSocket-Key: FWRPxaoGQhQaeqg1eRPHTw== Sec-WebSocket-Version: 13 Upgrade: websocket User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Если сервер поддерживает протокол WebSocket, он соглашается на переключение протокола через заголовок Upgrade

Response Headers

Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: content-type Access-Control-Allow-Headers: authorization Access-Control-Allow-Headers: x-websocket-extensions Access-Control-Allow-Headers: x-websocket-version Access-Control-Allow-Headers: x-websocket-protocol Access-Control-Allow-Origin: null Connection: Upgrade Date: Mon, 31 Dec 2018 19:53:07 GMT Sec-WebSocket-Accept: OQbuqh0sOBKbPsVMFPKNpI75N8I= Server: Kaazing Gateway Upgrade: websocket

В этот момент соединение HTTP разрывается и заменяется WebSocket-соединением через то же TCP/IP

WebSocket-соединение использует те же порты по умолчанию, что и HTTP (80) и HTTPS (443)

---

💼 Упражнение

Воспользуемся готовым WebSocket-сервером ws://echo.websocket.org, который возвращает назад сообщение, отправленное ему с клиента

Создадим WebSocket-соединение прямо в консоли браузера:

const websocket = new WebSocket( "ws://echo.websocket.org" )

Созданный с помощью конструктора WebSocket экземпляр websocket имеет свойства onopen, onmessage, onclose и onerror, а также методы send() и close(), и всем этим арсеналом мы сейчас воспользуемся:

☕ 1️⃣ websocket.org

const websocket = new WebSocket( "ws://echo.websocket.org" )
websocket.onopen = function ( event ) {
    console.log ( "CONNECTED" )
    websocket.send( "Happy New Year!" )
}
websocket.onclose = function ( event ) {
    console.log ( "DISCONNECTED" )
}
websocket.onmessage = function ( event ) {
    console.log ( event.data )
    websocket.close()
}
websocket.onerror = function ( event ) {
    console.error ( `ERROR: ${event.data}` )
}

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

CONNECTED
Happy New Year!
DISCONNECTED

---

Для получения некоторого экспириенса с веб-сокетами нам придется познакомиться с серверным 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

Обработчик

server.on ( 'connection', socket => {
    socket.on ( 'message', received => {
        console.log ( 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 => {
        console.log ( 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}`
        )
    })

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

Не обращайте внимания на сообщение Upgrade Required, которое появилось на странице

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

---

Клиентская часть

создание объекта WebSocket

При вызове конструктора WebSocket необходимо передать ему обязательный аргумент

протокол://домен:порт

• протокол может быть ws или wss
• поскольку мы создаем сервер на локальной машине, домен будет localhost или 127.0.0.1
• порт мы уже выбрали - 8080

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

🎓 Сервер

Для работы с веб-сокетами нам необходим сервер

Сервер мы создадим на localhost

start.js

const WebSocket = require('ws')

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

server.on('connection', socket => {
  socket.on('message', message => {
    console.log(`received from a client: ${message}`)
    socket.send( `Получено от клиента: ${message}!` )
  })
  socket.send('Hello world!')
})

index.js

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

socket.addEventListener('open', () => {
  socket.send('Привет, студент!')
})

socket.addEventListener( 'message', event => {
    console.log( `Сообщение от сервера: ${event.data}` )
    setTimeout (
      () => {
        let user = users[
            Math.round (
                Math.random() * (users.length-1)
            )
        ]
        socket.send( `Hello, I'm ${user.name}!` )
      },
      2000
    )
})

var users = [
  {
    name: "Mary",
    photo: ""
  },
  {
    name: "Margaret",
    photo: ""
  },
  {
    name: "Pedro",
    photo: ""
  },
  {
    name: "Stephan",
    photo: ""
  },
]
function sendMessage(socket, userName, content) {
  socket.send(
    JSON.stringify({
      userName,
      content
    })
  )
}

function receiveMessage(message) {
  console.log(`${message.userName} is saying: ${message.content}`)
}