Очень простая установка Websocket с помощью Deno без каких-либо пакетов
31.12.2022 09:21
Здесь мы рассмотрим, как можно использовать Websocket в Deno и развернуть его в Deno deploy. Мы будем слушать Websocket, а также отправлять сообщения.
Структура очень проста.
Что бы ни отправил клиент A, это сообщение получат клиент A и клиент B. Что бы ни отправил клиент B, это сообщение получат клиент A и клиент B. Если клиентов больше, то все клиенты получат сообщение, и все клиенты могут отправлять сообщения.
Код будет развернут в Deno deploy:
function main(
reqEvt: Deno.RequestEvent,
_netAddr: Deno.NetAddr,
): Response {
if (reqEvt.request.headers.get("upgrade") !== "websocket") {
return new Response(
"Websocket",
{
headers: { "content-type": "text/plain; charset=UTF-8" },
},
);
} else {
const { socket, response } = Deno.upgradeWebSocket(reqEvt.request);
const bcSend = new BroadcastChannel(reqEvt.request.url);
const bcReceive = new BroadcastChannel(reqEvt.request.url);
socket.onopen = (_) => {
bcReceive.addEventListener("message", (event) => {
socket.send(event.data);
});
};
socket.onmessage = (message) => {
bcSend.postMessage(message.data);
};
socket.onclose = (_) => {
bcReceive.close();
bcSend.close();
};
socket.onerror = (_) => {
socket.close();
};
return response;
}
}
async function handle(conn: Deno.Conn) {
try {
for await (const requestEvent of Deno.serveHttp(conn)) {
await requestEvent.respondWith(
main(requestEvent, conn.remoteAddr as Deno.NetAddr),
);
}
} catch (error) {
console.info(error);
}
}
const server = Deno.listen({
port: 8000,
});
for await (const conn of server) {
handle(conn);
}Вы увидите, что есть два BroadcastChannels. Необходимы оба.
В этом учебнике мы будем использовать клиент в браузере, а не Deno. Для клиента А и клиента Б HTML-код (с js и css) будет таким:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WS</title>
<style>
body {
background-color: black;
color: white;
text-align: center;
font-size: xx-large;
}
</style>
<script defer>
const ws = new WebSocket("<YOUR_DEPLOY_URL>"); // example: wss://<deploy_name>.deno.dev/
ws.onmessage = (message) => {
window.document.getElementById("text").innerText = message.data;
}; ws.close = () => {
window.document.getElementById("text").innerText="CLOSED";
}; ws.error = () => {
window.document.getElementById("text").innerText="ERROR";
}; function submit() {
ws.send(window.document.getElementById("input").value);
}
</script>
</head>
<body>
<div id="text"></div> <input id="input" type="text"><button onclick="submit()">SEND</button>
</body>
</html>Сохраните этот HTML код в двух разных устройствах (Клиент А и Клиент Б), Откройте HTML файл в браузерах с двух устройств. Вы можете отправлять сообщения из одного браузера в другой.
Это очень просто. Вы также можете передавать HTML-файл из Deno deploy по другому url-пути.
Стоит ли изучать PHP в 2023-2024 годах?
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
Концепция локализации и ее применение в приложениях React ⚡️
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
Пользовательский скаляр GraphQL
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.