Xiaobai легко понять | Простой чат WebSocket и Vue на практике

Всем привет! яВнешний мастер. Осадный лев интерфейса с чистотой кода (ха-ха, жизнь неаккуратна (*￣︶￣))

я верю всемWebsocketНе незнакомый, знакомый всем знаю немного, сегодня Xiaobian будет учиться вместе с вамиWebsocket. Создайте простой чат-проект, приветствуйте критику и исправления

Введение в веб-сокеты

Введение

WebSocketэто протокол для полнодуплексной связи по одному TCP-соединению. Родившийся в 2008 году, он был установлен в качестве стандарта в 2011 году.WebSocketЭто упрощает обмен данными между клиентом и сервером, позволяя серверу активно передавать данные клиенту. существуетWebSocket API, браузеру и серверу нужно только выполнить рукопожатие, и между ними может быть установлено постоянное соединение, и может выполняться двусторонняя передача данных.

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

Веб-сокет и схема HTTP

Зачем внедрять протокол Websocket

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

мы можем использовать только"轮询": время от времени отправляется запрос, чтобы узнать, есть ли на сервере новая информация. Самый типичный сценарий — чат. Опрос неэффективен и тратит ресурсы впустую (потому что вам нужно постоянно подключаться, иначе HTTP-соединение всегда открыто). Так родился WebSocket.

Сцена шоу: