WebSocket создает простой чат

Привет, всем смелым друзьям, всем привет, я твой рот сильный король Сяову, я здоров и мой разум не болен.

У меня есть множество навыков борьбы с выпадением волос, которые могут сделать вас пожилым человеком.

Это моя главная мысль, что я запишу это, когда увижу, и мне свойственно быть растрепанным, и в смиренном есть намек на силу.Я величайшее утешение для глупых людей.

Добро пожаловать в小五из随笔系列ИзWebSocket搭建简易聊天室.

предисловие

Эта статья для новичков, предназначенная для ознакомления сWebSocketи его применение; вся статья состоит из двух частей: в первой половине реализуется простой чат и развертывается на сервере, а во второй половине о нем подробно рассказываетсяWebSocketи поговори кстатиSSE.

Демонстрационный адрес проекта chat.deeruby.com

Ссылка кода двумя руками Портал - ajun568

Окончательный рендеринг ног

Реализация функции

👺 Описание требования: функция группового чата, которая может отправлять смайлики и картинки

👺 Проект принимает:React Hook + Redux + Nodejs + WebSocketРеализация, без базы данных

👺 Ссылка на стиль:привет письмо чат,Версия веб-сайта WeChat

Если судьи правыReduxЕсли вы недостаточно знаете, вы можете перейти к другой статье автора.Использование и принцип Redux в React Hook, Добро пожаловать, чтобы оставить сообщение для совета.

Как использовать веб-сокет

🦥клиент

Веб-сокет — Документация

🦅 Ниже приведены очки знаний, необходимые для этой статьи:

Создать соединение WebSocket ->new WebSocket(url)
постоянныйCONNECTING -> 0,OPEN -> 1,CLOSING -> 2,CLOSED -> 3
WebSocket.onopen-> Подключиться успешно, начать общение
WebSocket.onmessage-> Клиент получает сообщение, отправленное сервером
WebSocket.onclose-> Функция обратного вызова после закрытия соединения
WebSocket.onerror-> Функция обратного вызова после сбоя соединения
WebSocket.readyState-> текущий статус соединения
WebSocket.close-> закрыть текущее соединение
WebSocket.send-> Клиент отправляет сообщение на сервер

🦅 Создадим класс Ws, который обрабатывает все события связи

class Ws {
  constructor (url) {
    this.ws = new WebSocket(url);
  }

  initWs() {
    this.ws.onopen = () => {}
    this.ws.onmessage = (event) => {}
    this.ws.onclose = (event) => {}
    this.ws.onerror = () => {}
  }

  close() {
    this.ws.close();
  }

  send(data) {
    if (this.ws.readyState === this.ws.OPEN) {
      this.ws.send(data);
    }
  }
}

🦥Сервер

Здесь мы используем ws для связи с клиентом:ws — Документация

🦅 Код сервера выглядит следующим образом

import express from "express";
import WebSocket, { WebSocketServer } from "ws";

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

const send = (ws, data) => { // 向客户端发送消息
  ws.send(JSON.stringify(data));
}

const broadcast = (data) => { // 向所有客户端广播消息
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      send(client, data);
    }
  });
}

wss.on('open', () => { // 连接成功的回调函数
  console.log('connected');
});

wss.on('close', () => { // 连接关闭的回调函数
  console.log('disconnected');
});

wss.on('connection', (ws) => { 
  ws.on('message', (message) => {
    // 接收客户端发的消息
  });
});

app.listen(3000, () => {
  console.log('Start Service On 3000');
});

🦥отладка

❓ Как посмотреть в браузереWebSocketпросить

🦅 Открываем консоль, выбираемNetworkвнизWS, вы можете увидеть сообщение

Авторизоваться

Поскольку база данных не подключена, считается, что если введенное имя пользователя отсутствует в списке участников, будет создан новый пользователь, в противном случае будет сообщено об ошибке. На аватарке 50 случайных картинок, и ситуация, когда количество людей превышает 50, не рассматривается.

мы вlocalstorageИнформация о пользователе хранится в , и если имя пользователя не будет занято при следующем открытии, войдите в систему напрямую.

После входа в систему сервер возвращает информацию о пользователе и список участников, а возвращенные данные используются дляReduxместо хранения.

поболтать с

🦥 Чат - это процесс общения друг с другом.Всякие ситуации были рассмотрены в предыдущей статье, поэтому повторяться здесь не буду.Вот что нам нужно сделать.

Когда новый пользователь входит, нажмите xxx, чтобы войти в групповой чат.

При чате отправьте сообщение и информацию о пользователе на сервер, и сервер транслирует сообщение; если полученное сообщение соответствует текущему имени пользователя, оно считается нашим сообщением, и список сообщений отображается в соответствии с этим правилом.

Сервер хранит 50 исторических сообщений, готовых обновить страницу для отображения.

Прокручивайте область дисплея вниз каждый раз, когда получаете новое сообщение.

отправить смайлик

смайлик выбранemoji-martplugin, инфраструктура выглядит так:

Щелкните значок, чтобы отобразить поле смайликов, щелкните остальную часть области, чтобы закрыть окно смайликов, щелкните остальную часть областиПользовательский крючокследующим образом:

После выбора смайлика вставьте его в поле ввода и сфокусируйтесь.

Смайлики браузера Chrome под экраном Retina будут накладываться на текст, а теги span можно склеивать для обработки стилей.

// 匹配 emoji 的正则表达式
export const RetinaRegex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;

/* 样式适配 */
@media
not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and (min--moz-device-pixel-ratio: 2),
not screen and (-o-min-device-pixel-ratio: 2/1),
not screen and (min-device-pixel-ratio: 2),
not screen and (min-resolution: 192dpi),
not screen and (min-resolution: 2dppx) {
  .emoji {
    margin: 0 5px 0 0;
  }
}

отправить фотографии

Мы используем<input type="file">Для загрузки файлов принимаются только форматы изображений, а инфраструктура следующая:

Окно загрузки открывается при щелчке по значку; тогда мы просто обрабатываем его, используяFileReaderПрочитайте файл на компьютере, конвертируйте выбранный файл в формат base64 для загрузки, не забудьте очистить ввод, иначе картинка с таким названием не может быть загружена.

Из-за задержки загрузки изображения, при пролистывании полученного сообщения вниз будет отображаться только часть изображения, после загрузки изображения прокрутим вниз один раз.

Отключение и повторное подключение и обнаружение сердцебиения

При обновлении браузера или закрытии браузера соединение с сервером должно быть отключено.

Повторное подключение после отключения

Если браузер отключен от сервера, он переподключится. Мы переподключаемся каждые 5 секунд. Если переподключение по-прежнему не удается определенное количество раз, соединение будет разорвано. Сброс лимита лимита после успешного подключения.

Обнаружение сердцебиения

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

После отключения необходимо обновить список персонала в сети и удалить участников, которые не в сети.Автор добавил запланированную задачу на сервер для связи с клиентом.Если клиент отвечает, участник в сети, иначе он в оффлайне . Этот метод обработки относительно тупой, и вы можете оптимизировать его самостоятельно.

Развернуть на сервер

Автор написал этот контент отдельно, и ссылка выглядит следующим образом:Путь развертывания сервера Xiaobai

Говоря о веб-сокете

Что такое веб-сокет?

Это протокол, используемый клиентами и серверами для связи друг с другом. Идентификатор протоколаws, шифрованиеwss.

wss://api.chat.deeruby.com

Зачем использовать веб-сокет?

В традиционном протоколе HTTP коммуникация может быть инициирована только клиентом, и сервер не может активно отправлять сообщения клиенту, клиент должен получить их сам через опрос, что крайне неэффективно.

Как создается соединение WebSocket?

🦅 WebSocket не является новым протоколом, но использует протокол HTTP для установления соединения, поэтому соединение необходимо инициировать из браузера, формат следующий:

GET wss://api.chat.deeruby.com/ HTTP/1.1
Host: api.chat.deeruby.com
Connection: Upgrade
Upgrade: websocket
Origin: https://chat.deeruby.com
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: dsRxU8oSxU2Jru9hOgf4dg==

заголовок запросаUpgrade: websocketа такжеConnection: UpgradeУказывает, что это соединение будет преобразовано вWebSocketсоединять.
Sec-WebSocket-VersionуказанныйWebSocketВерсия протокола, если сервер не поддерживает эту версию, он должен вернутьSec-WebSocket-Versionзаголовок, который содержит номер версии, поддерживаемой сервером.
Sec-WebSocket-KeyИ серверSec-WebSocket-AcceptСопоставление, используемое для идентификации соединения.

🦅 Затем, если сервер примет запрос, он ответит следующим образом:

HTTP/1.1 101 Switching Protocols 
Connection: upgrade 
Upgrade: websocket 
Sec-WebSocket-Accept: aAO8QyaRJEYUX2yG+pTEwRQK04w=

код ответа101Указывает на это соединениеHTTPСоглашение будет изменено наUpgrade: websocketУказанныйWebSocketпротокол.
Sec-WebSocket-AccepбудуSec-WebSocket-Keyа также258EAFA5-E914-47DA-95CA-C5AB0DC85B11сращивание, черезSHA1Рассчитать и перевести вbase64нить.

Говоря о ССЕ

Что такое ССЕ?

SSE означает: события, отправленные сервером.

SSEиспользоватьHTTPсоглашение, иHTTPПротокол не может активно проталкивать сообщения сервером, но есть обходной путь, то есть сервер объявляет клиенту, а следующей отправкой является информация о потоке. Это непрерывный поток данных, а не одноразовый пакет данных, поэтому клиент не будет закрывать соединение, а всегда будет ждать, пока сервер отправит новый поток данных.SSEИменно с помощью этого механизма сообщения передаются в браузер с использованием потоковой информации.

В каких сценариях следует использовать SSE?

SSE подходит для сценариев, когда серверу нужно только отправлять сообщения клиенту.

Demo

Для подробного использования, пожалуйста, проверьте документацию самостоятельно.Это всего лишь небольшая демонстрация, которая соединяет сервер и клиент.Клиент используетEventSourceПолучите, документ выглядит следующим образом:EventSource

Как отладить?

открыть консоль,NetworkвнизXHR,EventStreamКто-то смотрит на данные

Ссылка 🔗 ссылка

[Program Ape Card] WebSocket: 5 минут от входа до мастерства

[Ляо Сюэфэн] WebSocket

[Ruan Yifeng] Учебное пособие по событиям, отправленным сервером