HTML - WebSockets: руковод BEGINNERS
Привет, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир WebSockets. Не волнуйтесь, если вы никогда о них не слышали раньше - к концу этого учебника вы станете магом WebSocket! Так что возьмите свой любимый напиток, устройтесь поудобнее и начнем наше путешествие.
Что такое WebSockets?
Прежде чем углубиться в Details, давайте поймем, что такое WebSockets и почему они такие классные. Представьте, что вы разговариваете с другом. В обычном телефонном звонке вам нужно набрать номер, подождать, пока он ответит, сказать, что вы хотите, и затем положить трубку. Если вы хотите снова поговорить, вы повторяете весь процесс. Звучит утомительно, не так ли?
Вот как работает традиционное веб-общение. Ваш браузер отправляет запрос, ждет ответа и затем закрывает соединение. WebSockets, с другой стороны, как если бы у вас был открытый телефонный номер, где вы и ваш друг можете разговаривать whenever вы хотите, не constantly набирать и класть трубку. Круто, правда?
Синтаксис
Теперь давайте посмотрим, как мы на самом деле используем WebSockets в нашем HTML. Синтаксис неожиданно прост:
<script>
var socket = new WebSocket('ws://example.com/socket');
</script>Здесь мы создаем новый объект WebSocket и подключаемся к серверу по адресу 'ws://example.com/socket'. Часть 'ws://' как 'http://' но специально для WebSockets. Есть также защищенная версия, 'wss://', как 'https://'.
Атрибуты WebSocket
WebSockets имеют некоторые удобные атрибуты, которые告诉我们 о текущем состоянии нашего соединения. Давайте посмотрим на них в таблице:
| Атрибут | Описание |
|---|---|
| readyState | Текущее состояние соединения |
| bufferedAmount | Количество байтов данных,queued с использованием метода send() |
| extensions | Выбранные сервером расширения |
| protocol | Имя подпротокола, выбранного сервером |
Атрибут readyState особенно полезен. Он может принимать четыре значения:
- 0 (CONNECTING): Соединение еще не открыто.
- 1 (OPEN): Соединение открыто и готово к общению.
- 2 (CLOSING): Соединение находится в процессе закрытия.
- 3 (CLOSED): Соединение закрыто или не может быть открыто.
События WebSocket
WebSockets не только отправляют данные - они также могут реагировать на различные события. Это как если бы вы устанавливали гирлянды, которые взрываются, когда происходит что-то конкретное! Вот основные события:
- onopen: Вызывается, когда соединение установлено.
- onmessage: Вызывается, когда данные получены с сервера.
- onerror: Вызывается, когда occurs ошибка.
- onclose: Вызывается, когда соединение закрыто.
Давайте посмотрим, как мы используем их в коде:
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
console.log('Соединение установлено!');
};
socket.onmessage = function(event) {
console.log('Сообщение с сервера:', event.data);
};
socket.onerror = function(error) {
console.log('Ошибка WebSocket:', error);
};
socket.onclose = function(event) {
console.log('Соединение закрыто.');
};
</script>В этом примере мы настраиваем функции для обработки каждого из этих событий. Когда соединение открывается, мы логируем сообщение. Когда мы получаем сообщение, мы логируем его. Если occurs ошибка, мы логируем и это. И когда соединение закрывается, мы прощаемся!
Методы WebSocket
Теперь, когда мы знаем, как слушать события, давайте посмотрим, как мы можем на самом деле что-то делать с нашим WebSocket. Вот основные методы:
| Метод | Описание |
|---|---|
| send() | Отправляет данные на сервер |
| close() | Закрывает соединение WebSocket |
Вот как мы используем эти методы:
<script>
var socket = new WebSocket('ws://example.com/socket');
// Отправка сообщения на сервер
socket.send('Привет, сервер!');
// Закрытие соединения
socket.close();
</script>Это так просто! С помощью send(), мы можем отправить любые данные, которые хотим, на сервер. И когда мы закончили, мы вежливо закрываем соединение с помощью close().
Настройка WebSocket сервера на Python
Теперь я знаю, что мы сосредоточены на HTML здесь, но я думаю, что важно понять обе стороны разговора. Так что давайтеquicklook на то, как мы можем настроить простой сервер WebSocket с использованием Python. Не волнуйтесь, если вы не знакомы с Python - концепция важна здесь.
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Эхо: {message}")
start_server = websockets.serve(echo, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()Этот сервер просто эхо любое сообщение, которое он получает, с префиксом "Эхо: ". Он работает на localhost (вашем компьютере) на порту 8765.
Настройка HTML клиента для сервера
Теперь у нас есть наш сервер, давайте создадим HTML-страницу, которая будет подключаться к нему:
<!DOCTYPE html>
<html>
<head>
<title>Тест WebSocket</title>
</head>
<body>
<h1>Тест WebSocket</h1>
<input type="text" id="messageInput" placeholder="Введите сообщение">
<button onclick="sendMessage()">Отправить</button>
<div id="messages"></div>
<script>
var socket = new WebSocket('ws://localhost:8765');
socket.onopen = function(event) {
console.log('Соединение установлено!');
};
socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>Эта HTML-страница создает простой интерфейс, где вы можете ввести сообщение, отправить его на сервер и увидеть эхо-ответ.
И вот и все! Мы рассмотрели основы WebSockets, от понимания, что они такое, до настройки сервера и создания клиента. Помните, WebSockets - это все о реальном времени, двустороннем общении. Они идеальны для приложений, таких как чаты, live sport обновления или любые ситуации, где вам нужно мгновенноеexchange данных.
Пока вы продолжаете свое путешествие в веб-разработке, вы найдете, что WebSockets открывают全新的 мир возможностей. Так что продолжайте практиковаться, продолжайте экспериментировать и, самое главное, продолжайте наслаждаться! Счастливого кодирования!
Credits: Image by storyset