actix/actix-extras
1
0
Fork 0
mirror of https://github.com/actix/actix-extras.git synced 2024-11-23 15:51:06 +01:00
Code Issues Releases Wiki Activity

docs: split chat example

Browse Source
This commit is contained in:
Rob Ede 2024-06-20 01:37:37 +01:00
parent 8aa2c959c4
commit e7ee2a06ab
No known key found for this signature in database
GPG Key ID: 97C636207D3EF933
3 changed files with 77 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
actix-ws/Cargo.toml
View File

@ -23,9 +23,9 @@ tokio = { version = "1", features = ["sync"] }
[dev-dependencies] [dev-dependencies]
actix-rt = "2.6" actix-rt = "2.6"
actix-web = "4.0.1" actix-web = "4.8"
anyhow = "1.0" anyhow = "1"
futures-util = "0.3.17" futures-util = { version = "0.3.17", default-features = false, features = ["std"] }
log = "0.4" log = "0.4"
pretty_env_logger = "0.5" pretty_env_logger = "0.5"
tokio = { version = "1", features = ["sync"] } tokio = { version = "1", features = ["sync"] }

69
actix-ws/examples/chat.html Normal file
View File

@ -0,0 +1,69 @@
<html>
<head>
<meta charset="utf-8" />
<title>Chat</title>
<script>
function onLoad() {
console.log("BOOTING");
const socket = new WebSocket("ws://localhost:8080/ws");
const input = document.getElementById("chat-input");
const logs = document.getElementById("chat-logs");
if (!input || !logs) {
alert("Couldn't find required elements");
console.err("Couldn't find required elements");
return;
}
input.addEventListener(
"keyup",
(event) => {
if (event.isComposing) {
return;
}
if (event.key != "Enter") {
return;
}
socket.send(input.value);
input.value = "";
},
false
);
socket.onmessage = (event) => {
const newNode = document.createElement("li");
newNode.textContent = event.data;
let firstChild = null;
for (const n of logs.childNodes.values()) {
if (n.nodeType == 1) {
firstChild = n;
break;
}
}
if (firstChild) {
logs.insertBefore(newNode, firstChild);
} else {
logs.appendChild(newNode);
}
};
window.addEventListener("beforeunload", () => {
socket.close();
});
}
if (document.readyState === "complete") {
onLoad();
} else {
document.addEventListener("DOMContentLoaded", onLoad, false);
}
</script>
</head>
<body>
<input id="chat-input" type="test" />
<ul id="chat-logs"></ul>
</body>
</html>

75
actix-ws/examples/chat.rs
View File

@ -3,7 +3,9 @@ use std::{
time::{Duration, Instant}, time::{Duration, Instant},
}; };
use actix_web::{middleware::Logger, web, App, HttpRequest, HttpResponse, HttpServer}; use actix_web::{
middleware::Logger, web, web::Html, App, HttpRequest, HttpResponse, HttpServer, Responder,
};
use actix_ws::{Message, Session}; use actix_ws::{Message, Session};
use futures_util::{stream::FuturesUnordered, StreamExt as _}; use futures_util::{stream::FuturesUnordered, StreamExt as _};
use log::info; use log::info;
@ -116,75 +118,8 @@ async fn ws(
Ok(response) Ok(response)
} }
async fn index() -> HttpResponse { async fn index() -> impl Responder {
let s = r#" Html::new(include_str!("chat.html").to_owned())
<html>
<head>
<meta charset="utf-8" />
<title>Chat</title>
<script>
function onLoad() {
console.log("BOOTING");
const socket = new WebSocket("ws://localhost:8080/ws");
const input = document.getElementById("chat-input");
const logs = document.getElementById("chat-logs");
if (!input || !logs) {
alert("Couldn't find required elements");
console.err("Couldn't find required elements");
return;
}
input.addEventListener("keyup", event => {
if (event.isComposing) {
return;
}
if (event.key != "Enter") {
return;
}
socket.send(input.value);
input.value = "";
}, false);
socket.onmessage = event => {
const newNode = document.createElement("li");
newNode.textContent = event.data;
let firstChild = null;
for (const n of logs.childNodes.values()) {
if (n.nodeType == 1) {
firstChild = n;
break;
}
}
if (firstChild) {
logs.insertBefore(newNode, firstChild);
} else {
logs.appendChild(newNode);
}
};
window.addEventListener("beforeunload", () => { socket.close() });
}
if (document.readyState === "complete") {
onLoad();
} else {
document.addEventListener("DOMContentLoaded", onLoad, false);
}
</script>
</head>
<body>
<input id="chat-input" type="test" />
<ul id="chat-logs">
</ul>
</body>
</html>
"#;
HttpResponse::Ok().content_type("text/html").body(s)
} }
#[actix_rt::main] #[actix_rt::main]