WebSocket

В работе мы разрабатывали больше всего согласование, протокол HTTP, в последние годы многие API и технологии начали постепенно продвигаться вперед, сегодня мы соберемся вместе, чтобы обсудить более интересный API, WebSocket

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

Несколько слов о HTTP

HTTP — это протокол запроса-ответа, используемый в модели клиент/сервер, в которой браузер отправляет HTTP-запрос на сервер, а сервер отвечает запрошенным ресурсом.

Подразумевается, что вы можете думать об этой модели какрация,ПерсонаСказать,другой человекслышать

HTTP — это полудуплексная связь.

Характеристики этой полудуплексной связи:

тот же моментданныеодносторонний потокДа, клиент запрашивает данные с сервера -> в одну сторону, сервер возвращает данные клиенту -> в одну сторону
Сервер не может активно передавать данные клиенту

Выше приведено краткое описание протокола HTTP, поэтому перейдем непосредственно к сегодняшней теме.

дуплексная связь

До того, как появился веб-сокет H5, для достижения этогоPush Technology., есть три наиболее часто используемых метода реализации:голосование,долгий опроса такжепоток iframe, а вот трое братьев более-менее ложка дегтя

Поэтому благодаря постоянным усилиям великих богов был определен полезный API веб-сокета для улучшения реализации дуплексной связи.

Наступила эра WebSocket, не пропустите! ! !

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

Конечно, если вы знаете более глубокий уровень, вы должны знать, что он принадлежитприкладной уровеньсоглашение, этона основе TCPпротокол передачи иМультиплексирование HTTPканал рукопожатия

Сколько ни говори, а лучше понять.Давайте рассмотрим преимущества websocket.

Преимущества веб-сокетов

Поддержка двусторонней связи, более в режиме реального времени (вы можете быть QQ, WeChat, старым железом)
лучшая бинарная поддержка
Меньше накладных расходов на управление (после создания соединения, когда клиент и сервер ws обмениваются данными, заголовок пакета, контролируемого протоколом, меньше)

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

Стучите по WebSocket вместе

Давайте сначала запишем WebSocket главной страницы, посмотрим на основное использование, поместим код, не стесняйтесь

// 创建一个index.html文件
// 下面直接写WebSocket

// 只需要new一下就可以创建一个websocket的实例
// 我们要去连接ws协议
// 这里对应的端口就是服务端设置的端口号9999
let ws = new WebSocket('ws://localhost:9999');

// onopen是客户端与服务端建立连接后触发
ws.onopen = function() {
    ws.send('哎呦，不错哦');
};

// onmessage是当服务端给客户端发来消息的时候触发
ws.onmessage = function(res) {
    console.log(res);   // 打印的是MessageEvent对象
    // 真正的消息数据是 res.data
    console.log(res.data);
};

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

Дальше делаем все, давайте напишем часть приема и отправки сообщений вебсокетом в фоновом режиме, и продолжим

Подождите, давайте сначала установим его

// 后台需要安装ws包
npm i ws -S

Здесь мы используем node Express, чтобы просто создать фоновую службу, и структура каталогов также очень проста, как показано ниже.

Давайте начнем накатывать этот файл server.js

const express = require('express');
const app = express();
// 设置静态文件夹
app.use(express.static(__dirname));
// 监听3000端口
app.listen(3000);
// =============================================
// 开始创建一个websocket服务
const Server = require('ws').Server;
// 这里是设置服务器的端口号，和上面的3000端口不用一致
const ws = new Server({ port: 9999 });

// 监听服务端和客户端的连接情况
ws.on('connection', function(socket) {
    // 监听客户端发来的消息
    socket.on('message', function(msg) {
        console.log(msg);   // 这个就是客户端发来的消息
        // 来而不往非礼也，服务端也可以发消息给客户端
        socket.send(`这里是服务端对你说的话： ${msg}`);
    });
});

Таким образом настраивается фоновая служба.После доступа к localhost:3000 вы можете увидеть сообщение в консоли.

Увидев это, мы искренне обнаружим, что независимо от того, написано ли это в интерфейсе или на заднем плане, мы обнаружим, что они на самом деле очень похожи, поэтому его относительно легко использовать, просто нажмите несколько раз, практика делает совершенным, ха-ха

Следующий шаг еще не закончен, так как websocket — это что-то, созданное по стандарту H5, конечно, старая версия браузера не очень хорошо его поддерживает, а в это время фронтенду придется решать чертову проблему совместимости.

Из-за этого в мире появится еще одна более полезная библиотека, которой является знаменитаяsocket.io

Давайте воспользуемся этим Yaxing, не останавливайтесь, продолжайте узнавать об этом короле полнодуплексной связи

socket.io

Давайте посмотрим, что особенного в socket.io.

Возможности socket.io

Простота использования: он инкапсулирует сервер и клиент, которые просты в использовании.
Кроссплатформенность: поддержка кроссплатформенности, вы можете разрабатывать приложения в реальном времени на сервере или клиенте.
Адаптивный: в зависимости от браузера он решает, использовать ли WebSocket, длинный опрос Ajax или поток Iframe, чтобы выбрать лучший способ, даже поддерживает IE5.5.

Ну, после прочтения характеристик, тогда...

Меньше рутины, больше искренности, перестань нести чушь, просто начни снова играть с нуля.

установка socket.io

// 安装在本地项目
npm i socket.io -S

Запуск службы, рукописный сервер

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

// server.js文件
const express = require('express');
const app = express();
// 设置静态文件夹
app.use(express.static(__dirname));
// 通过node的http模块来创建一个server服务
const server = require('http').createServer(app);
// WebSocket是依赖HTTP协议进行握手的
const io = require('socket.io')(server);
// 监听客户端与服务端的连接
io.on('connection', function(socket) {
    // send方法来给客户端发消息
    socket.send('青花瓷');
    // 监听客户端的消息是否接收成功
    socket.on('message', function(msg) {
        console.log(msg);  // 客户端发来的消息
        socket.send('天青色等烟雨，而我在等你' );
    });
});
// 监听3000端口
server.listen(3000);

Горячо, серверный код написан, а потом начинайте писать фронтальную часть, засучите рукава и вкалывайте! ! !

После запуска сервера клиенту необходимо обратиться к динамически сгенерированному пути к файлу.Путь представляет собой фиксированную прямую ссылку (/socket.io/socket.io.js).

// index.html文件
...省略
// 引用socket.io的js文件
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io('/');
    // 监听与服务器连接成功的事件
    socket.on('connect', () => {
        console.log('连接成功');
        socket.send('周杰伦');
    });
    // 监听服务端发来的消息
    socket.on('message', msg => {
        // 这个msg就是传过来的真消息了，不用再msg.data取值了
        console.log(`客户端接收到的消息： ${msg}`);  
    });
    // 监听与服务器连接断开事件
    socket.on('disconnect', () => {
        console.log('连接断开成功');
    });
</script>

☆ Вот небольшой совет: io может получить сокет, когда он создает сокетurlпараметр

URL-адрес может быть полным http-адресом службы сокетов, например:io('http://localhost:3000')
Это также может быть относительный путь, например:io('/')
Если он не заполнен, это означает, что текущий путь подключен по умолчанию, например:io()

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

Но то, о чем я собираюсь рассказать дальше, использование socket.io для создания чата — это слишком много энергии, и аудитория уже немного устала.

Так что настало время для тех, кто знает текущие дела, быть Junjie.Я покажу это вам в следующем выпуске.Спасибо за просмотр, 886