Принцип и особенности использования Websocket (ws+socket.io)

предисловие

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

1. Принцип РОЗЕТКИ

Сокет примерно относится к сквозному соединению, а два конца называются сокетами.

HTTP основан на протоколе TCP транспортного уровня, как и Socket API, поэтому просто с точки зрения использования можно считать, что Socket похож на HTTP (HTTP — это написанный интернет-протокол, а Socket — это концепция программирования который использовался все время), это передача Еще одно прямое использование протокола уровня.

1.1 Концепция сокета

Сокет является краеугольным камнем связи и основной операционной единицей сетевой связи, поддерживающей протокол TCP/IP. Это абстрактное представление конечных точек в процессе сетевого взаимодействия, Содержит пять типов информации, необходимой для сетевого взаимодействия:

протокол, используемый соединением,
IP-адрес локального хоста,
порт протокола локального процесса,
IP-адрес удаленного хоста,
Порт протокола удаленного процесса

Когда прикладной уровень передает данные через транспортный уровень, TCP сталкивается с проблемой одновременного предоставления услуг для нескольких прикладных процессов. Для передачи данных через один и тот же порт протокола TCP может потребоваться несколько соединений TCP или несколько процессов приложений. Чтобы различать различные прикладные процессы и соединения, многие компьютерные операционные системы предоставляют интерфейсы сокетов (Socket) для прикладных программ для взаимодействия с протоколом TCP/IP. Прикладной уровень может отличать связь от различных прикладных процессов или сетевых подключений через интерфейс Socket с транспортным уровнем и реализовывать параллельную службу передачи данных.

1.2 Установка сокетного соединения

Для установления соединения Socket требуется по крайней мере пара сокетов, один из которых работает на стороне клиента, называется ClientSocket, а другой работает на стороне сервера, называется ServerSocket.

Процесс соединения между сокетами делится на три этапа: мониторинг сервера, запрос клиента и подтверждение соединения.

Сервер слушает: Сокет на стороне сервера не является целевым сокетом конкретного клиента, а находится в состоянии ожидания подключения, мониторинга состояния сети в реальном времени, ожидания запроса на подключение от клиента.

запрос клиента: Относится к запросу на подключение, сделанному клиентским сокетом, и цель, к которой нужно подключиться, — это сокет на стороне сервера. Для этого сокет клиента должен сначала описать сокет сервера, к которому он хочет подключиться, указать адрес и номер порта сокета на стороне сервера, а затем сделать запрос на подключение к сокету на стороне сервера.

подтверждение подключения: Когда сокет на стороне сервера прослушивает или получает запрос на подключение сокета на стороне клиента, он отвечает на запрос сокета на стороне клиента, устанавливает новый поток и отправляет описание сокета на стороне сервера клиенту. Как только клиент подтверждает это описание, две стороны официально устанавливают соединение. Сокет на стороне сервера продолжает находиться в состоянии прослушивания и продолжает получать запросы на подключение от других сокетов на стороне клиента.

Обратите внимание, что Socket — это не протокол, а более удобный метод программирования для удобства разработчиков. Socket реализует инкапсуляцию TCP/IP через фасадный режим, фактически предоставляя ряд интерфейсов для верхнего уровня, чтобы облегчить наши операции в наших собственных приложениях, не беспокоясь о сложной обработке TCP/IP. Этот сетевой уровень относится к уровню передачи данных.

2. Веб-сокет

Протокол WebSocket — это новый протокол в HTML5. В настоящее время, кроме браузера IE, в основном поддерживаются другие браузеры. Он реализует полнодуплексную связь между браузером и сервером. Первоначальное рукопожатие необходимо выполнить с помощью HTTP-запроса.

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

2.1 Недостатки опроса:

Протокол HTTP является непостоянным односторонним сетевым протоколом.После установления соединения сервер может вернуть соответствующие данные только после того, как браузер отправит запрос на сервер. Когда требуется обмен мгновенными сообщениями, браузер отправляет запрос запроса на сервер через определенный интервал времени (например, 1 секунду) путем опроса, а затем возвращает последние данные в браузер.

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

HTTP1.1 по умолчанию использует длинное соединение.При использовании HTTP-протокола длинного соединения в заголовок ответа будет добавлена следующая строка информации: Connection:keep-alive

Однако появление WebSocket может компенсировать эти недостатки. В WebSocket требуются только серверы и браузеры, чтобы выполнить рукопожатие по протоколу HTTP, а затем установить канал связи TCP для передачи данных.

2.2 Принцип веб-сокета

WebSocket также является прикладным уровнем, как и HTTP, но это протокол двусторонней связи, построенный на TCP.

WebSocket — это протокол для полнодуплексной связи по одному TCP-соединению. WebSocket API также является стандартом W3C.

WebSocket упрощает обмен данными между клиентом и сервером, позволяя серверу активно передавать данные клиенту. В API WebSocket браузеру и серверу нужно выполнить рукопожатие только один раз, и между ними может быть установлено постоянное соединение, и может выполняться двусторонняя передача данных.

Процесс рукопожатия:

Браузер и сервер устанавливают TCP-соединение и трехстороннее рукопожатие. Это основа связи, уровень управления передачей, в случае сбоя он не будет выполняться.
После успеха подключения TCP номера версий браузера и другая информация передавала поддержку Websocket к серверу через протокол HTTP. (HTTP пожать руки перед началом)
После того, как сервер получает запрос подтверждения от клиента, он также использует протокол HTTP для возврата данных.
После получения сообщения об успешном соединении сообщение передается по TCP-каналу.

Протокол запроса по умолчанию для Websocket: ws://, а порт по умолчанию: 80. Протокол запроса для шифрования TLS: wss://, порт: 443.

2.3 Связь между webSocket и HTTP

Та же точка:

Оба основаны на TCP и являются надежными транспортными протоколами.
Оба являются протоколами прикладного уровня.

разница:

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

соединять: При установлении рукопожатия WebSocket данные передаются по протоколу HTTP. Но после установки протокол HTTP не нужен для реальной передачи.

2.4 Связь между WebSocket и Socket

Сокет на самом деле не протокол, а уровень, абстрагированный для удобства использования TCP или UDP, представляет собой набор интерфейсов между прикладным уровнем и уровнем управления передачей. TCP — это надежное соединение, и данные могут быть отправлены только после установления соединения, udp — ненадежное соединение, и данные могут быть отправлены без соединения.

Socket — это уровень абстракции промежуточного программного обеспечения, который взаимодействует между прикладным уровнем и набором протоколов TCP/IP.Это набор интерфейсов. В режиме проектирования Socket фактически является фасадным режимом. Он скрывает сложное семейство протоколов TCP/IP за интерфейсом Socket. Пользователям достаточно набора простых интерфейсов. Пусть Socket организует данные в соответствии с указанными требования протокол.

Когда два хоста обмениваются данными, они должны быть соединены через Socket, а Socket использует протокол TCP/IP для установления TCP-соединения. Соединение TCP в большей степени зависит от базового протокола IP, а соединение протокола IP зависит от более низких уровней, таких как канальный уровень.

WebSocket — это типичный протокол прикладного уровня, а Socket — это протокол уровня управления передачей.

2.5 Возможности WebSocket и общие понятия

Поддержка браузера/среды Nodejs
Поддержка двусторонней связи
Простой и удобный API
Поддержка двоичной передачи
Уменьшить объем передаваемых данных

2.5.1 Долгий опрос

Длинный опрос HTTP означает, что после того, как сервер получит запрос, если есть данные, он немедленно ответит на запрос; если данных нет, он будет удерживаться в течение определенного периода времени, а если данные в течение этого периода есть, он немедленно ответит на запрос; если время истекло, а данных нет, он ответит на http-запрос; после того, как браузер получит http-ответ, он немедленно отправляет тот же http-запрос, чтобы проверить, есть ли данные;

2.5.2 Короткий опрос:

Независимо от того, получает ли клиент данные ответа от сервера, он будет периодически отправлять запрос на сервер, чтобы проверить, есть ли какое-либо обновление данных. Ограничением краткого опроса http является низкая производительность в реальном времени;

Сходства между длинным опросом и коротким опросом: Можно видеть, что как длинный опрос http, так и короткий опрос http будут выполняться в течение определенного периода времени;

Различия между длинным опросом и коротким опросомНезависимо от того, происходит ли интервал на стороне сервера или на стороне браузера: длинный опрос http будет удерживаться в течение определенного периода времени на стороне сервера, а короткий опрос http будет «удерживаться» на стороне браузера в течение определенного периода времени;заявление: http long polling обычно используется в web im, im предъявляет высокие требования к реальному времени, управление http long polling всегда находится на стороне сервера, а данные находятся на стороне сервера, поэтому производительность в реальном времени высока;

Короткий опрос HTTP обычно используется в местах с высокими требованиями к реальному времени, например, на стороне браузера запрашивается подсчет микронепрочитанных баров Sina.

2.5.3 Длинное соединение

Длинные соединения относятся к TCP-соединениям, а не к HTTP-соединениям.
Длинное соединение означает, что соединение будет использоваться повторно
И сервер, и клиент установили Connection: keep-alive
Теперь используется базовый протокол HTTP1.1 и длинное соединение по умолчанию HTTP1.1.

Так называемое длинное http-соединение заключается в том, что несколько HTTP-запросов используют одно TCP-соединение, что может сократить время, затрачиваемое на установление и закрытие TCP, вызванное несколькими соседними HTTP-запросами.В http 1.1 поле соединения используется в запросе. заголовок и соответствующий заголовок, чтобы определить, является ли это длинным соединением http, соединение: keep-alive указывает, что это длинное соединение http; соединение: закрыто, указывает, что сервер закрывает соединение tcp.

Поле, соответствующее подключению, является сохранение в прямом эфире, которое отображается в заголовке ответа HTTP. Его формат - это время время ожидания = 30, MAX = 5, тайм-аут - это время (ы), которые сохраняются два http-запроса, а max - максимум Это TCP соединение. Повторное использование для нескольких HTTP-запросов

Это означает, что по TCP-соединению может быть отправлено несколько пакетов данных.Во время удержания TCP-соединения, если пакеты данных не отправляются, обеим сторонам необходимо отправлять пакеты пульса для поддержания соединения. Процесс соединения: установить соединение - передача данных - ... - (отправить контрольные пакеты, поддерживать соединение) - ... - передача данных - закрыть соединение

выгода:

Например, чтобы запросить обычную веб-страницу, эта веб-страница должна содержать ряд ресурсов, таких как CSS и JS.Если это короткое соединение (т. е. TCP-соединение необходимо каждый раз переустанавливать), то каждый раз веб-страница открыта, в принципе это необходимо Установление нескольких или даже десятков TCP-соединений тратит впустую много сетевых ресурсов. Если это длинное соединение, то многие HTTP-запросы (включая содержимое запрошенной веб-страницы, файлы CSS, файлы JS, изображения и т. д.) используют TCP-соединение, что, очевидно, может сэкономить много ресурсов.

Еще один момент, долгое соединение не является постоянным соединением. Если в течение какого-то периода времени (конкретное время можно указать в шапке, то есть так называемый период тайм-аута) при отсутствии HTTP-запроса на это соединение, то длительное соединение будет разорвано.

Примечание. Из-за протокола HTTP1.1 соединение по умолчанию является длинным. Аргумент короткого соединения отсутствует (HTTP1.0 по умолчанию использует короткие соединения), большинство длинных и коротких соединений в Интернете по сути являются соединениями TCP.

2.5.4 Короткое соединение

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

В настоящее время протокол http обычно используется в версии 1.1.Раньше была версия 1.0.Единственное различие между ними заключается в том, что 1.1 поддерживает длинные HTTP-соединения.

http1.0 не поддерживает долгосрочные http-соединения, TCP-соединение закрывается после ответа на каждый http-запрос, а следующий HTTP-запрос восстанавливает TCP-соединение.

2.5.5 Концепция коммуникации

Симплекс

Направление передачи данных уникально, и данные могут передаваться только в одном фиксированном направлении от отправителя к получателю.

полудуплекс

I.E., обе стороны связи являются отправителем, который получатель, однако, позволяет только передавать данные одновременно в одном направлении.

Полный дуплекс:

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

Симплекс, полудуплекс и полный дуплекс — эти три концепции основаны на протоколе TCP (транспортном уровне), не путайте его с прикладным уровнем.

В-третьих, разница и связь между HTTP и TCP

3.1, TCP Connection

Для установления TCP-соединения требуется «трехстороннее рукопожатие»:

Первое рукопожатие: клиент отправляет пакет синхронизации (syn=j) на сервер и переходит в состояние SYN_SEND, ожидая подтверждения от сервера;

Второе рукопожатие: сервер получает син-пакет и должен подтвердить SYN клиента (ack=j+1), и в то же время отправляет SYN-пакет (syn=k), то есть SYN+ACK-пакет, в это время время перехода сервера в состояние SYN_RECV;

Третье рукопожатие: клиент получает от сервера пакет SYN+ACK и отправляет на сервер пакет подтверждения ACK (ack=k+1).После отправки пакета клиент и сервер переходят в состояние ESTABLISHED и завершают трехстороннее рукопожатие.

Пакет, передаваемый в процессе рукопожатия, не содержит данных.После завершения трехэтапного рукопожатия клиент и сервер официально начинают передачу данных. В идеале, как только TCP-соединение установлено, TCP-соединение будет поддерживаться до тех пор, пока какая-либо из сторон не закроет соединение. Когда соединение разорвано, как сервер, так и клиент могут активно инициировать запрос на разъединение TCP-соединения.Процесс разъединения должен пройти через «четырехстороннее рукопожатие» (процесс не детализирован, то есть сервер и клиент взаимодействует и, наконец, определяет отключение)

3.2, HTTP-соединение

Протокол передачи гипертекста является основой веб-сети, а также является одним из часто используемых протоколов мобильной сети. Протокол HTTP - это приложение, установленное в протоколе TCP.

Наиболее примечательной особенностью HTTP-соединений является то, что каждый запрос, отправленный клиентом, требует, чтобы сервер отправил ответ, и соединение будет активно разорвано после завершения запроса. Процесс от установления соединения до его закрытия называется «одноразовым соединением».

1) В HTTP 1.0 для каждого запроса клиента требуется установить отдельное соединение, и соединение автоматически разрывается после обработки запроса.

2) Можно обрабатывать несколько запросов в одном соединении в HTTP 1.1 и может перекрывать множество запросов, не дожидаясь следующего запроса после окончания запроса трансмиссии.

Поскольку HTTP будет активно разрывать соединение после каждого запроса, HTTP-соединение является «коротким соединением».Чтобы поддерживать онлайн-состояние клиентской программы, необходимо постоянно инициировать запросы на соединение с сервером. Обычная практика заключается в том, что даже если нет необходимости в получении каких-либо данных, клиент также продолжает отправлять серверу запрос «поддерживать соединение» через регулярные промежутки времени, и сервер отвечает клиенту после получения запроса, указывая, что он знает клиента "онлайн". Если сервер длительное время не может получить запрос клиента, считается, что клиент «офлайн», если клиент длительное время не может получить ответ от сервера, считается, что сеть отключена.

TCP — это базовый протокол связи, который определяет спецификацию методов передачи данных и соединения.
HTTP — это протокол прикладного уровня, определяющий спецификацию содержания передаваемых данных.
Данные протокола HTTP передаются с использованием протокола TCP, поэтому существует некоторая поддержка TCP.
HTTP поддерживает службу www;
Протокол TCP/IP является основой Интернет-сети Интернет. TCP/IP — это основной протокол связи, используемый в сети.

В-четвертых, nodejs создает веб-сервер и Tcp-сервер.

4.1 Создание веб-сервера с помощью Express

var express = require('express');
var app = express();

app.use(express.static('./public'))
app.get('/',(req,res,next)=>{
  res.end('hello');
  next(); // 进行下一步，打印日志 
})

//Router方法 适合某一个模块下的多个子路由
var Router = express.Router();
Router.get('/add',(req,res)=>{
  res.end('add')
})
Router.get('/list',(req,res)=>{
  res.end('list')
})
app.use('/post', Router)

//route方法  适合restful API
app.route('/article')
  .get((req,res)=>{
    res.end('/article get')
  })
  .post((req,res)=>{
    res.end('/article post')
  })
app.get('/news/:newsId', (req, res)=>{
  req.end('newsId:' + req.newsId);
})    

app.listen(18001, function afterLister(){
  console.log('服务再次启动')
})

4.2 Создание TCP-сервера

Чтобы создать TCP-сервер с Node.js, сначала используйте require('net') для загрузки сетевого модуля, а затем используйте метод createServer сетевого модуля для создания TCP-сервера.

Создайте TCP-сервер с помощью сетевого модуля.
Используйте telnet для подключения к TCP-серверу
Создайте TCP-клиент с помощью net

Следующий код создает TCP-сервер:

//引入net模块
var net=require('net');
//创建TCP服务器
var server=net.createServer(function(socket){
    console.log('someone connets');
})
server.listen(18001,function(){
    console.log('server is listening');
});

при вводе в браузереhttp://localhost:18001/, кто-то будет напечатан после успешного подключенияСлово connets указывает на то, что функция обратного вызова метода createServer была выполнена, указывая на то, что TCP-сервер успешно подключен.

Сервер: tcp.js:

const HOST = '127.0.0.1';
//引入net模块
var net=require('net');

//创建TCP服务器
var server=net.createServer(function(socket){
    console.log('someone connets');
    //     //获取地址信息
    var address=server.address();
    //获取地址端口
    console.log('the port  is '+address.port);
    console.log('the address  is '+address.address);
    var message='client,the server address is'+JSON.stringify(address);
     //发送数据
     socket.write(message,function(){
        var writeSize=socket.bytesWritten; 
        console.log(message+'has send');
        console.log('the size of message is'+writeSize);
    });

    //监听dada事件
    socket.on('data',function(data){
        //打印data
        console.log(data.toString());
        socket.write('server write:test ')
    });
});
 //设置监听端口
server.listen(18001,HOST,function(){  
    console.log('server is listening');
});

Запустите сервисный узел tcp.js

клиентская команда

1> Введите смоделированный клиент в консоль cmd: telnet 127.0.0.1 18001

Но сначала нужно проверить телнет через панель управления, как показано ниже:

2> Или смоделируйте отладку клиента и сервера с помощью помощника по отладке сети.

Адрес загрузки отладки помощника по отладке сети:

链接：https://pan.baidu.com/s/1bZQm1f9UtBKPSAIyqM4Nyw 
提取码：d9ck

Ссылаться на:Woohoo.online down.net/soft/971066…

Клиент tcpClient.js:

var net = require('net')

const PORT = 18001;
const HOST = '127.0.0.1';

var tcpClient = net.Socket();
tcpClient.connect(PORT, HOST, function(){
  console.log('客户端发送信息成功打印')
  tcpClient.write('客户端发送信息成功')
});

tcpClient.on('data',(data)=>{
  console.log( data.toString())
})

5. Общая структура веб-сокета

socket.io
Ws

5.1 События WebSocket:

WebSocket API полностью управляется событиями и может обрабатывать входящие данные и изменять состояние ссылки, прослушивая события. Клиенту не нужно опрашивать сервер для обновления данных. После отправки сервером данных сообщения и события поступают асинхронно. Программирование WebSocket следует модели асинхронного программирования, и вам нужно только добавить функцию обратного вызова к объекту WebSocket для прослушивания событий. Вы также можете использовать метод addEventListener() для прослушивания. И объект WebSocket делится на четыре типа различных событий.

5.1.1 open:

Как только сервер отвечает на запрос подключения WebSocket, запускается событие open. Функция обратного вызова для ответа называется onopen.

ws.onopen = function(e) {
    console.log("Connection open...");
};

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

5.1.2 Message

Когда сообщение принято, запускается событие сообщения, и функция обратного вызова ответа вызывается onmessage. следующим образом: // Экземпляр обработчика событий, который принимает текстовые сообщения:

ws.onmessage = function(e) {
    if(typeof e.data === "string"){
    console.log("String message received", e, e.data);
    } else {
    console.log("Other message received", e, e.data);
}
};

Помимо текстовых сообщений механизм сообщений WebSocket также может обрабатывать бинарные данные.Существует два типа Blob и ArrayBuffer.Перед чтением данных необходимо определить тип данных.

// 设置二进制数据类型为blob（默认类型）
ws.binaryType = "blob";
// Event handler for receiving Blob messages
ws.onmessage = function(e) {
    if(e.data instanceof Blob){
    console.log("Blob message received", e.data);
    var blob = new Blob(e.data);
}
};
//ArrayBuffer
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
if(e.data instanceof ArrayBuffer){
    console.log("ArrayBuffer Message Received", + e.data);// e.data即ArrayBuffer类型
    var a = new Uint8Array(e.data);
}
};

5.1.3 Error

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

//异常处理
ws.onerror = function(e) {
   console.log("WebSocket Error: " , e);
};

5.1.4 Close

Само собой разумеется, что это событие запускается, когда соединение закрывается, что соответствует методу onclose.После закрытия соединения сервер и клиент больше не могут отправлять и получать сообщения. Конечно, вы можете вызвать метод close, чтобы отключиться от сервера, чтобы вызвать событие onclose,

ws.onclose = function(e) {
    console.log("Connection closed", e);
};

5.2 Метод веб-сокета:

5.2.1 send

После того, как полнодуплексное двустороннее подключение на сервере и клиенте, вы можете использовать метод отправки для отправки сообщений, // Отправить текстовое сообщение WS.Send (Hello Websocket! »);

Метод send() передает данные, когда соединение открыто, и генерирует исключение, когда соединение закрыто или недоступно.

Примечание: данные должны быть отправлены после открытия

var ws = new WebSocket("ws://echo.websocket.org")
ws.onopen = function(e) {
    ws.send("Initial data");
}

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

function myEventHandler(data) {
if (ws.readyState === WebSocket.OPEN) {
    //open的时候即可发送
    ws.send(data);
} else {
    // Do something else in this case.
}
}

Отправить бинарные данные:

// Send a Blob
var blob = new Blob("blob contents");
ws.send(blob);
// Send an ArrayBuffer
var a = new Uint8Array([8,6,7,5,3,0,9]);
ws.send(a.buffer);

Объект Blob полезен при использовании с JavaScript File API для отправки или получения файлов, большинства мультимедийных файлов, изображений, видео- и аудиофайлов. В конце этой главы мы предоставим пример кода для чтения содержимого файла и отправки сообщений WebSocket в сочетании с File API.

5.2.2 close()

Используйте метод Close, чтобы закрыть соединение, если соединение установлено, и метод ничего не сделает. Данные не будут отправлены после вызова метода Close. WS.Закрыть();

Шестое, веб-сокет для создания серверной службы ws.

1. Простая установка

Установите модуль ws, npm установите ws

ws: это библиотека WebSocket для nodejs, которую можно использовать для создания сервисов.

ws по адресу github

Протокол WebSocket определяет две схемы URL, WS и WSS, которые представляют незашифрованную и зашифрованную связь между клиентом и сервером соответственно. WS (WebSocket) аналогичен URL-адресу Http, а URL-адрес WSS (WebSocket Security) указывает, что соединение основано на безопасности транспортного уровня (TLS/SSL), а https — это тот же механизм безопасности.

2. Конфигурация сервера server.js

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

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});

Полный код сервера выглядит следующим образом:

var WebSocket = require('ws').Server;

let wss = new WebSocket({
    port:8181
})
// wss 继承eventEmitter

wss.on('connection',function(ws){
    //链接成功
    console.log('建立链接')
    // 监听客户端发送的信息
    ws.on('message',function(data){
        console.log(data);

        //单一：谁给我发， 我就给谁发
        ws.send('hello' + data )

        //群发 

    })

    ws.on('close',function(){
        console.log('关闭链接')
    })
});

3. Клиент client.html устанавливает ссылку WebSocket.

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

Конструктор WebSocket принимает параметр URL и необязательный параметр протокола (имя одного или нескольких протоколов), например XMPP, SOAP (простой протокол доступа к объектам) или пользовательский протокол. Параметры URL должны начинаться с WS:// или WSS://, например: ws://www.websocket.org

Установите соединение WebSocket на странице. Отправьте сообщение методом send.

var ws = new WebSocket("ws://localhost:8181");
    ws.onopen = function (e) {
        console.log('Connection to server opened');
    }
    function sendMessage() {
        ws.send($('#message').val());
    }

Конкретный полный код выглядит следующим образом:

  <input class="form-control" type="text" name="message" id="message"
            placeholder="Type text to echo in here" value="" />
            <button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">
            Send!
        </button>
<script>
         //原生的 ie9不支持
        var ws = new WebSocket("ws://localhost:8181");
            ws.onopen = function (e) {
                console.log('Connection to server opened');
                let msg = {type:'test',id:1,info:'laney'}
                ws.send(JSON.stringify(msg));
                console.log("sened a laney");
            }
            function sendMessage() {
                var message = document.getElementById('message');
                // ws.send(message.value); //给后端发送信息

                ws.send(JSON.stringify({type:'test1',id:1,info:message.value}))
            }
            //收到服务端的请求
            ws.onmessage = function (e) {
                console.log(e.data);
            }

            </script>

После запуска ниже сервер мгновенно получает доступ к информации о клиенте.

Семь, Websocket Server на основе сборки сборки.

Socket.io — одна из многих библиотек веб-сокетов, которая не просто реализует веб-сокет, как другие библиотеки, а обертывает толстый слой вне веб-сокета. Обычному веб-сокету (например, библиотеке ws) нужен только сервер, Socket.io настроил протокол на основе веб-сокета, поэтому сервер и клиент socket.io должны совпадать. Короче говоря, если сервер использует socket.io, то у клиента нет выбора, и он также должен использовать клиент socket.io.

socket.io — это библиотека, инкапсулированная на основе engine.io.
socket.io — это библиотека связи клиент-сервер в реальном времени, основанная на Websocket.
Нижний уровень socket.io использует engine.io для инкапсуляции уровня протокола.

socket.io предоставляет концепцию комнаты (пространства имен). Когда клиент создает новое постоянное соединение, для различия выделяется новое пространство имен.

7.1 события socket.io

7.1.1 Системные события сервера socket.io

io.on('connection', callback): когда установлено новое соединение Socket socket.on('message', callback): срабатывает, когда метод socket..send() отправил сообщение socket.on('disconnect', callback): срабатывает при разрыве соединения

7.1.2 Системные события клиента

Socket.io.on: срабатывает, когда клиент Socket включается с новым подключением к серверу. Socket.Io.on («Подключиться», обратный вызов): срабатывает, когда клиент Socket подключается к серверу. Socket.io.on («Connect_timeout», обратный вызов): срабатывает, когда клиент Socket подключается к серверу. Socket.io.on ('Connec_ERRORT', CALLBACK): срабатывает при сбое сервера подключения клиента Socket. Socket.io.on («Connect_attemptt», обратный вызов): срабатывает, когда клиент Socket пытается повторно подключиться к серверу. Socket.io.on («переподключение», обратный вызов): срабатывает, когда клиент Socket повторно подключается к серверу. Socket.io.on («reconnect_error», обратный вызов): срабатывает, когда клиент Socket повторно подключается к серверу со сбоем. Socket.io.on ('reconnect_fail', обратный вызов): срабатывает, когда клиент Socket повторно подключается к серверу со сбоем. Socket.io.on: срабатывает, когда клиент сокета закрывается сервером.

7.2 nodejs взаимодействуют друг с другом нативной привязкой Socket.io к серверу и клиенту

1. Установите Socket.io 2. Напишите нативный JS, соберите сервер, а после того, как сервер будет создан, создайте io-объект. 3. Сервер вещает через emit и принимает вещание через on 4. Клиент осуществляет широковещательную рассылку через emit и принимает широковещательную рассылку через on

Протокол WebSocket — это новый протокол в HTML5. Он реализует полнодуплексную связь между браузером и сервером и позволяет осуществлять междоменную связь, что является хорошей реализацией технологии push-уведомлений сервера. Мы используем Socket.io, который прекрасно инкапсулирует интерфейс webSocket, предоставляет более простой и гибкий интерфейс и обеспечивает обратную совместимость для браузеров, не поддерживающих webSocket.

7.2.1 Почему нам нужно WebSocket

Любой, кто знаком с протоколами компьютерных сетей, должен знать, что протокол HTTP — это односторонний протокол прикладного уровня без сохранения состояния и установления соединения. Он принимает модель запрос/ответ. Запрос связи может быть инициирован только клиентом, и сервер отвечает на запрос.

У этой модели связи есть недостаток: протокол HTTP не может позволить серверу активно инициировать сообщения клиенту.

7.2.2 Определенные шаги и использование

1. Установите Socket.io

URL-адрес:socket.io/

npm install socket.io 
或者 yarn add  socket.io

2. Создайте сервер server и создайте объект ввода-вывода.

var http = require('http');
var path = require('path');
var fs = require('fs');

//引入socket.io
var socket = require('socket.io');

var app = http.createServer(function(req,res){
     //加载静态页面

    fs.readFile(path.resolve(__dirname,'app.html'),function(err,data){
        if(req.url=="/"){ 
            res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});
            res.end(data);
        }
    })

})

// socket 与 http服务建立连接
var io = socket(app);

// 监听连接事件 
io.on('connection',function(sock){
    console.log(sock)
    console.log('服务器建立连接了');
})

app.listen(3000,'127.0.0.1');

После сокета и HTTP подключения к сервису вы найдете,http://127.0.0.1:3000/socket.io/socket.io.jsЭто адрес файла JS.

Теперь нам нужно создать индексную страницу на стороне клиента, на которой должна быть ссылка на секретный js-файл. Вызовите функцию io, чтобы получить объект сокета.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端</title>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
</head>
<body>
    
    <script>
      var socket = io('http://localhost:3000/');  /*和服务器建立连接*/
    </script>
</body>
</html>

В это время он распечатает «клиент устанавливает соединение с сервером» на терминале

3. Сервер вещает через emit и принимает вещание через on


//引入socket.io
var socket = require('socket.io');

// socket 与 http服务建立连接
var io = socket(app);

// 监听连接事件 
io.on('connection',function(sock){
    console.log('一个客户端与服务器建立连接了');

    //服务器获取客户端广播的数据
    sock.on('addcart', function(data){
        console.log(data);

          //服务器给客户端发送数据
            //socket.emit();   /*谁给我发信息我把信息广播给谁*/
            //io.emit() ;   /*群发  给所有连接服务器的客户都广播数据*/

        socket.emit('to-client','我是服务器的数据'+data.client);

        //io.emit('to-client','我是服务器的数据'+data.client);

    })

    sock.on('disconnect',function(){
        console.log('断开连接了');
    })

})

У каждого подключенного пользователя есть сокет. Поскольку наш оператор emit выдается функцией socket.emit(), он относится к выдаче оператора этому клиенту.

Вещание заключается в отправке информации всем подключенным в данный момент пользователям:

io.emit('to-client','我是服务器的数据'+data.client);
 /*群发  给所有连接服务器的客户都广播数据*/

4. Клиент осуществляет широковещательную рассылку через emit и принимает широковещательную рассылку через on

 <button id="button">给服务器发送数据</button>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script>
      var socket = io('http://localhost:3000/');  /*和服务器建立连接*/

      socket.on('connect',function(){
            console.log('客户端和服务端建立连接了');
      })

      socket.on('disconnect',function(){
            console.log('客户端和服务端断开连接了');
      })


      var btn=document.getElementById('button');
      btn.onclick= function () {
                //客户端给服务器发送数据
                socket.emit('addcart',{
                    client:'我是客户端的数据'
                })
        }

       //监听服务器的广播
      socket.on('to-client',function(data){
         console.log('服务端说:'+data)
       })

    </script>

7.3 Express объединяет Socket.io для реализации взаимной связи между сервером и клиентом.

Первая цель — создать простую HTML-страницу со списком форм и сообщений.

var app = require('express')();
//创建http server ,  createServer 与 Server作用一样都是创建server
var http = require('http').createServer(app);
//var http = require('http').Server(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Express инициализирует приложение как обработчик функции, который может быть предоставлен HTTP-серверу. Мы определяем обработчик маршрута, который будет вызываться при посещении домашней страницы нашего веб-сайта.

У нас есть http-сервер, прослушивающий порт 3000.

7.3.1 Знакомство с Socket.IO

npm install socket.io

Примечание: socket.io основан на http-сервисе (параметр socket.io — это http-сервер)

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

7.3.2 Код для записи сокета

//3、写socket的代码
io.on('connection', function (socket) {
      console.log('a user connected');
      socket.on('message',function(key){
          console.log(key);
  
         //io.emit  广播
        //socket.emit  谁给我发的信息我回返回给谁
          //io.emit('servermessage',data);   /*服务器给客户端发送数据*/

         //   机器人聊天
        //   console.log(robot[key])
        //   socket.emit('servermessage',robot[key]);

          io.emit('servermessage',key.msg);

      })
  });

7.3.3 Групповой чат

io.emit трансляция Как только информация о клиенте будет получена, отправьте эту информацию всем пользователям-клиентам, подключенным к этому сервису.

io.emit('servermessage',data); /Клиент отправляет данные на сервер/

7.3.4 Чат робота

socket.emit, кто отправляет мне информацию, которую я возвращаю кому Конкретный код, как указано выше:

socket.emit('servermessage',robot[key]);

7.3.5 Код клиента

  <ul id="messages"> </ul>
    <form >
      <input id="msg" autocomplete="off" /><button id="send" >Send</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

     //群聊功能--聊天室
     $('#send').click(function(e){
         e.preventDefault();
            var msg=$('#msg').val();
            // socket.emit('message',msg);  /*客户端给服务器发送数据*/

            // 带上自己的名字
            socket.emit('message',{
                name:'laney',
                msg:msg
            });  /*客户端给服务器发送数据*/


        })

   //接受服务器返回的数据
   socket.on('servermessage',function(data){
        console.log(data)
        $('#messages').append(`<li>${data}<li>`)
    })

</script>

Ссылаться на:

https://github.com/websockets/ws
https://www.cnblogs.com/chyingp/p/6072338.html
https://www.cnblogs.com/tzyy/p/5124256.html