mirror of
https://github.com/actix/examples
synced 2025-06-26 17:17:42 +02:00
Restructure folders (#411)
This commit is contained in:
committed by
GitHub
parent
9db98162b2
commit
c3407627d0
23
websockets/chat/Cargo.toml
Normal file
23
websockets/chat/Cargo.toml
Normal file
@ -0,0 +1,23 @@
|
||||
[package]
|
||||
name = "websocket-example"
|
||||
version = "2.0.0"
|
||||
authors = ["Nikolay Kim <fafhrd91@gmail.com>"]
|
||||
edition = "2018"
|
||||
|
||||
[[bin]]
|
||||
name = "websocket-chat-server"
|
||||
path = "src/main.rs"
|
||||
|
||||
[dependencies]
|
||||
actix = "0.10"
|
||||
actix-web = "3"
|
||||
actix-web-actors = "3"
|
||||
actix-files = "0.3"
|
||||
|
||||
rand = "0.7"
|
||||
bytes = "0.5"
|
||||
byteorder = "1.3"
|
||||
futures = "0.3"
|
||||
env_logger = "0.8"
|
||||
serde = "1"
|
||||
serde_json = "1"
|
36
websockets/chat/README.md
Normal file
36
websockets/chat/README.md
Normal file
@ -0,0 +1,36 @@
|
||||
# Websocket chat example
|
||||
|
||||
This is extension of the
|
||||
[actix chat example](https://github.com/actix/actix/tree/master/examples/chat)
|
||||
|
||||
Added features:
|
||||
|
||||
* Browser WebSocket client
|
||||
* Chat server runs in separate thread
|
||||
* Tcp listener runs in separate thread
|
||||
* Application state is shared with the websocket server and a resource at `/count/`
|
||||
|
||||
## Server
|
||||
|
||||
1. Chat server listens for incoming tcp connections. Server can access several types of message:
|
||||
|
||||
* `/list` - list all available rooms
|
||||
* `/join name` - join room, if room does not exist, create new one
|
||||
* `/name name` - set session name
|
||||
* `some message` - just string, send message to all peers in same room
|
||||
* client has to send heartbeat `Ping` messages, if server does not receive a heartbeat message for 10 seconds connection gets dropped
|
||||
|
||||
2. [http://localhost:8080/count/](http://localhost:8080/count/) is a
|
||||
non-websocket endpoint and will affect and display state.
|
||||
|
||||
To start server use command: `cargo run --bin websocket-chat-server`
|
||||
|
||||
## Client
|
||||
|
||||
Client connects to server. Reads input from stdin and sends to server.
|
||||
|
||||
To run client use command: `cargo run --bin websocket-chat-client`
|
||||
|
||||
## WebSocket Browser Client
|
||||
|
||||
Open url: [http://localhost:8080/](http://localhost:8080/)
|
80
websockets/chat/client.py
Executable file
80
websockets/chat/client.py
Executable file
@ -0,0 +1,80 @@
|
||||
#!/usr/bin/env python3
|
||||
"""websocket cmd client for actix/websocket-tcp-chat example."""
|
||||
import argparse
|
||||
import asyncio
|
||||
import signal
|
||||
import sys
|
||||
|
||||
import aiohttp
|
||||
|
||||
queue = asyncio.Queue()
|
||||
|
||||
|
||||
async def start_client(url, loop):
|
||||
name = input('Please enter your name: ')
|
||||
|
||||
ws = await aiohttp.ClientSession().ws_connect(url, autoclose=False, autoping=False)
|
||||
|
||||
def stdin_callback():
|
||||
line = sys.stdin.buffer.readline().decode('utf-8')
|
||||
if not line:
|
||||
loop.stop()
|
||||
else:
|
||||
# Queue.put is a coroutine, so you can't call it directly.
|
||||
asyncio.ensure_future(queue.put(ws.send_str(name + ': ' + line)))
|
||||
|
||||
loop.add_reader(sys.stdin, stdin_callback)
|
||||
|
||||
async def dispatch():
|
||||
while True:
|
||||
msg = await ws.receive()
|
||||
if msg.type == aiohttp.WSMsgType.TEXT:
|
||||
print('Text: ', msg.data.strip())
|
||||
elif msg.type == aiohttp.WSMsgType.BINARY:
|
||||
print('Binary: ', msg.data)
|
||||
elif msg.type == aiohttp.WSMsgType.PING:
|
||||
await ws.pong()
|
||||
elif msg.type == aiohttp.WSMsgType.PONG:
|
||||
print('Pong received')
|
||||
else:
|
||||
if msg.type == aiohttp.WSMsgType.CLOSE:
|
||||
await ws.close()
|
||||
elif msg.type == aiohttp.WSMsgType.ERROR:
|
||||
print('Error during receive %s' % ws.exception())
|
||||
elif msg.type == aiohttp.WSMsgType.CLOSED:
|
||||
pass
|
||||
break
|
||||
|
||||
await dispatch()
|
||||
|
||||
|
||||
async def tick():
|
||||
while True:
|
||||
await (await queue.get())
|
||||
|
||||
|
||||
async def main(url, loop):
|
||||
await asyncio.wait([start_client(url, loop), tick()])
|
||||
|
||||
|
||||
ARGS = argparse.ArgumentParser(
|
||||
description="websocket console client for wssrv.py example.")
|
||||
ARGS.add_argument(
|
||||
'--host', action="store", dest='host',
|
||||
default='127.0.0.1', help='Host name')
|
||||
ARGS.add_argument(
|
||||
'--port', action="store", dest='port',
|
||||
default=8080, type=int, help='Port number')
|
||||
|
||||
if __name__ == '__main__':
|
||||
args = ARGS.parse_args()
|
||||
if ':' in args.host:
|
||||
args.host, port = args.host.split(':', 1)
|
||||
args.port = int(port)
|
||||
|
||||
url = 'http://{}:{}/ws/'.format(args.host, args.port)
|
||||
|
||||
loop = asyncio.get_event_loop()
|
||||
loop.add_signal_handler(signal.SIGINT, loop.stop)
|
||||
asyncio.Task(main(url, loop))
|
||||
loop.run_forever()
|
264
websockets/chat/src/main.rs
Normal file
264
websockets/chat/src/main.rs
Normal file
@ -0,0 +1,264 @@
|
||||
use std::sync::{
|
||||
atomic::{AtomicUsize, Ordering},
|
||||
Arc,
|
||||
};
|
||||
use std::time::{Duration, Instant};
|
||||
|
||||
use actix::*;
|
||||
use actix_files as fs;
|
||||
use actix_web::{web, App, Error, HttpRequest, HttpResponse, HttpServer, Responder};
|
||||
use actix_web_actors::ws;
|
||||
|
||||
mod server;
|
||||
|
||||
/// How often heartbeat pings are sent
|
||||
const HEARTBEAT_INTERVAL: Duration = Duration::from_secs(5);
|
||||
/// How long before lack of client response causes a timeout
|
||||
const CLIENT_TIMEOUT: Duration = Duration::from_secs(10);
|
||||
|
||||
/// Entry point for our websocket route
|
||||
async fn chat_route(
|
||||
req: HttpRequest,
|
||||
stream: web::Payload,
|
||||
srv: web::Data<Addr<server::ChatServer>>,
|
||||
) -> Result<HttpResponse, Error> {
|
||||
ws::start(
|
||||
WsChatSession {
|
||||
id: 0,
|
||||
hb: Instant::now(),
|
||||
room: "Main".to_owned(),
|
||||
name: None,
|
||||
addr: srv.get_ref().clone(),
|
||||
},
|
||||
&req,
|
||||
stream,
|
||||
)
|
||||
}
|
||||
|
||||
/// Displays and affects state
|
||||
async fn get_count(count: web::Data<Arc<AtomicUsize>>) -> impl Responder {
|
||||
let current_count = count.fetch_add(1, Ordering::SeqCst);
|
||||
format!("Visitors: {}", current_count)
|
||||
}
|
||||
|
||||
struct WsChatSession {
|
||||
/// unique session id
|
||||
id: usize,
|
||||
/// Client must send ping at least once per 10 seconds (CLIENT_TIMEOUT),
|
||||
/// otherwise we drop connection.
|
||||
hb: Instant,
|
||||
/// joined room
|
||||
room: String,
|
||||
/// peer name
|
||||
name: Option<String>,
|
||||
/// Chat server
|
||||
addr: Addr<server::ChatServer>,
|
||||
}
|
||||
|
||||
impl Actor for WsChatSession {
|
||||
type Context = ws::WebsocketContext<Self>;
|
||||
|
||||
/// Method is called on actor start.
|
||||
/// We register ws session with ChatServer
|
||||
fn started(&mut self, ctx: &mut Self::Context) {
|
||||
// we'll start heartbeat process on session start.
|
||||
self.hb(ctx);
|
||||
|
||||
// register self in chat server. `AsyncContext::wait` register
|
||||
// future within context, but context waits until this future resolves
|
||||
// before processing any other events.
|
||||
// HttpContext::state() is instance of WsChatSessionState, state is shared
|
||||
// across all routes within application
|
||||
let addr = ctx.address();
|
||||
self.addr
|
||||
.send(server::Connect {
|
||||
addr: addr.recipient(),
|
||||
})
|
||||
.into_actor(self)
|
||||
.then(|res, act, ctx| {
|
||||
match res {
|
||||
Ok(res) => act.id = res,
|
||||
// something is wrong with chat server
|
||||
_ => ctx.stop(),
|
||||
}
|
||||
fut::ready(())
|
||||
})
|
||||
.wait(ctx);
|
||||
}
|
||||
|
||||
fn stopping(&mut self, _: &mut Self::Context) -> Running {
|
||||
// notify chat server
|
||||
self.addr.do_send(server::Disconnect { id: self.id });
|
||||
Running::Stop
|
||||
}
|
||||
}
|
||||
|
||||
/// Handle messages from chat server, we simply send it to peer websocket
|
||||
impl Handler<server::Message> for WsChatSession {
|
||||
type Result = ();
|
||||
|
||||
fn handle(&mut self, msg: server::Message, ctx: &mut Self::Context) {
|
||||
ctx.text(msg.0);
|
||||
}
|
||||
}
|
||||
|
||||
/// WebSocket message handler
|
||||
impl StreamHandler<Result<ws::Message, ws::ProtocolError>> for WsChatSession {
|
||||
fn handle(
|
||||
&mut self,
|
||||
msg: Result<ws::Message, ws::ProtocolError>,
|
||||
ctx: &mut Self::Context,
|
||||
) {
|
||||
let msg = match msg {
|
||||
Err(_) => {
|
||||
ctx.stop();
|
||||
return;
|
||||
}
|
||||
Ok(msg) => msg,
|
||||
};
|
||||
|
||||
println!("WEBSOCKET MESSAGE: {:?}", msg);
|
||||
match msg {
|
||||
ws::Message::Ping(msg) => {
|
||||
self.hb = Instant::now();
|
||||
ctx.pong(&msg);
|
||||
}
|
||||
ws::Message::Pong(_) => {
|
||||
self.hb = Instant::now();
|
||||
}
|
||||
ws::Message::Text(text) => {
|
||||
let m = text.trim();
|
||||
// we check for /sss type of messages
|
||||
if m.starts_with('/') {
|
||||
let v: Vec<&str> = m.splitn(2, ' ').collect();
|
||||
match v[0] {
|
||||
"/list" => {
|
||||
// Send ListRooms message to chat server and wait for
|
||||
// response
|
||||
println!("List rooms");
|
||||
self.addr
|
||||
.send(server::ListRooms)
|
||||
.into_actor(self)
|
||||
.then(|res, _, ctx| {
|
||||
match res {
|
||||
Ok(rooms) => {
|
||||
for room in rooms {
|
||||
ctx.text(room);
|
||||
}
|
||||
}
|
||||
_ => println!("Something is wrong"),
|
||||
}
|
||||
fut::ready(())
|
||||
})
|
||||
.wait(ctx)
|
||||
// .wait(ctx) pauses all events in context,
|
||||
// so actor wont receive any new messages until it get list
|
||||
// of rooms back
|
||||
}
|
||||
"/join" => {
|
||||
if v.len() == 2 {
|
||||
self.room = v[1].to_owned();
|
||||
self.addr.do_send(server::Join {
|
||||
id: self.id,
|
||||
name: self.room.clone(),
|
||||
});
|
||||
|
||||
ctx.text("joined");
|
||||
} else {
|
||||
ctx.text("!!! room name is required");
|
||||
}
|
||||
}
|
||||
"/name" => {
|
||||
if v.len() == 2 {
|
||||
self.name = Some(v[1].to_owned());
|
||||
} else {
|
||||
ctx.text("!!! name is required");
|
||||
}
|
||||
}
|
||||
_ => ctx.text(format!("!!! unknown command: {:?}", m)),
|
||||
}
|
||||
} else {
|
||||
let msg = if let Some(ref name) = self.name {
|
||||
format!("{}: {}", name, m)
|
||||
} else {
|
||||
m.to_owned()
|
||||
};
|
||||
// send message to chat server
|
||||
self.addr.do_send(server::ClientMessage {
|
||||
id: self.id,
|
||||
msg,
|
||||
room: self.room.clone(),
|
||||
})
|
||||
}
|
||||
}
|
||||
ws::Message::Binary(_) => println!("Unexpected binary"),
|
||||
ws::Message::Close(reason) => {
|
||||
ctx.close(reason);
|
||||
ctx.stop();
|
||||
}
|
||||
ws::Message::Continuation(_) => {
|
||||
ctx.stop();
|
||||
}
|
||||
ws::Message::Nop => (),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl WsChatSession {
|
||||
/// helper method that sends ping to client every second.
|
||||
///
|
||||
/// also this method checks heartbeats from client
|
||||
fn hb(&self, ctx: &mut ws::WebsocketContext<Self>) {
|
||||
ctx.run_interval(HEARTBEAT_INTERVAL, |act, ctx| {
|
||||
// check client heartbeats
|
||||
if Instant::now().duration_since(act.hb) > CLIENT_TIMEOUT {
|
||||
// heartbeat timed out
|
||||
println!("Websocket Client heartbeat failed, disconnecting!");
|
||||
|
||||
// notify chat server
|
||||
act.addr.do_send(server::Disconnect { id: act.id });
|
||||
|
||||
// stop actor
|
||||
ctx.stop();
|
||||
|
||||
// don't try to send a ping
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.ping(b"");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
#[actix_web::main]
|
||||
async fn main() -> std::io::Result<()> {
|
||||
env_logger::init();
|
||||
|
||||
// App state
|
||||
// We are keeping a count of the number of visitors
|
||||
let app_state = Arc::new(AtomicUsize::new(0));
|
||||
|
||||
// Start chat server actor
|
||||
let server = server::ChatServer::new(app_state.clone()).start();
|
||||
|
||||
// Create Http server with websocket support
|
||||
HttpServer::new(move || {
|
||||
App::new()
|
||||
.data(app_state.clone())
|
||||
.data(server.clone())
|
||||
// redirect to websocket.html
|
||||
.service(web::resource("/").route(web::get().to(|| {
|
||||
HttpResponse::Found()
|
||||
.header("LOCATION", "/static/websocket.html")
|
||||
.finish()
|
||||
})))
|
||||
.route("/count/", web::get().to(get_count))
|
||||
// websocket
|
||||
.service(web::resource("/ws/").to(chat_route))
|
||||
// static resources
|
||||
.service(fs::Files::new("/static/", "static/"))
|
||||
})
|
||||
.bind("127.0.0.1:8080")?
|
||||
.run()
|
||||
.await
|
||||
}
|
217
websockets/chat/src/server.rs
Normal file
217
websockets/chat/src/server.rs
Normal file
@ -0,0 +1,217 @@
|
||||
//! `ChatServer` is an actor. It maintains list of connection client session.
|
||||
//! And manages available rooms. Peers send messages to other peers in same
|
||||
//! room through `ChatServer`.
|
||||
|
||||
use actix::prelude::*;
|
||||
use rand::{self, rngs::ThreadRng, Rng};
|
||||
|
||||
use std::sync::{
|
||||
atomic::{AtomicUsize, Ordering},
|
||||
Arc,
|
||||
};
|
||||
|
||||
use std::collections::{HashMap, HashSet};
|
||||
|
||||
/// Chat server sends this messages to session
|
||||
#[derive(Message)]
|
||||
#[rtype(result = "()")]
|
||||
pub struct Message(pub String);
|
||||
|
||||
/// Message for chat server communications
|
||||
|
||||
/// New chat session is created
|
||||
#[derive(Message)]
|
||||
#[rtype(usize)]
|
||||
pub struct Connect {
|
||||
pub addr: Recipient<Message>,
|
||||
}
|
||||
|
||||
/// Session is disconnected
|
||||
#[derive(Message)]
|
||||
#[rtype(result = "()")]
|
||||
pub struct Disconnect {
|
||||
pub id: usize,
|
||||
}
|
||||
|
||||
/// Send message to specific room
|
||||
#[derive(Message)]
|
||||
#[rtype(result = "()")]
|
||||
pub struct ClientMessage {
|
||||
/// Id of the client session
|
||||
pub id: usize,
|
||||
/// Peer message
|
||||
pub msg: String,
|
||||
/// Room name
|
||||
pub room: String,
|
||||
}
|
||||
|
||||
/// List of available rooms
|
||||
pub struct ListRooms;
|
||||
|
||||
impl actix::Message for ListRooms {
|
||||
type Result = Vec<String>;
|
||||
}
|
||||
|
||||
/// Join room, if room does not exists create new one.
|
||||
#[derive(Message)]
|
||||
#[rtype(result = "()")]
|
||||
pub struct Join {
|
||||
/// Client id
|
||||
pub id: usize,
|
||||
/// Room name
|
||||
pub name: String,
|
||||
}
|
||||
|
||||
/// `ChatServer` manages chat rooms and responsible for coordinating chat
|
||||
/// session. implementation is super primitive
|
||||
pub struct ChatServer {
|
||||
sessions: HashMap<usize, Recipient<Message>>,
|
||||
rooms: HashMap<String, HashSet<usize>>,
|
||||
rng: ThreadRng,
|
||||
visitor_count: Arc<AtomicUsize>,
|
||||
}
|
||||
|
||||
impl ChatServer {
|
||||
pub fn new(visitor_count: Arc<AtomicUsize>) -> ChatServer {
|
||||
// default room
|
||||
let mut rooms = HashMap::new();
|
||||
rooms.insert("Main".to_owned(), HashSet::new());
|
||||
|
||||
ChatServer {
|
||||
sessions: HashMap::new(),
|
||||
rooms,
|
||||
rng: rand::thread_rng(),
|
||||
visitor_count,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl ChatServer {
|
||||
/// Send message to all users in the room
|
||||
fn send_message(&self, room: &str, message: &str, skip_id: usize) {
|
||||
if let Some(sessions) = self.rooms.get(room) {
|
||||
for id in sessions {
|
||||
if *id != skip_id {
|
||||
if let Some(addr) = self.sessions.get(id) {
|
||||
let _ = addr.do_send(Message(message.to_owned()));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Make actor from `ChatServer`
|
||||
impl Actor for ChatServer {
|
||||
/// We are going to use simple Context, we just need ability to communicate
|
||||
/// with other actors.
|
||||
type Context = Context<Self>;
|
||||
}
|
||||
|
||||
/// Handler for Connect message.
|
||||
///
|
||||
/// Register new session and assign unique id to this session
|
||||
impl Handler<Connect> for ChatServer {
|
||||
type Result = usize;
|
||||
|
||||
fn handle(&mut self, msg: Connect, _: &mut Context<Self>) -> Self::Result {
|
||||
println!("Someone joined");
|
||||
|
||||
// notify all users in same room
|
||||
self.send_message(&"Main".to_owned(), "Someone joined", 0);
|
||||
|
||||
// register session with random id
|
||||
let id = self.rng.gen::<usize>();
|
||||
self.sessions.insert(id, msg.addr);
|
||||
|
||||
// auto join session to Main room
|
||||
self.rooms
|
||||
.entry("Main".to_owned())
|
||||
.or_insert_with(HashSet::new)
|
||||
.insert(id);
|
||||
|
||||
let count = self.visitor_count.fetch_add(1, Ordering::SeqCst);
|
||||
self.send_message("Main", &format!("Total visitors {}", count), 0);
|
||||
|
||||
// send id back
|
||||
id
|
||||
}
|
||||
}
|
||||
|
||||
/// Handler for Disconnect message.
|
||||
impl Handler<Disconnect> for ChatServer {
|
||||
type Result = ();
|
||||
|
||||
fn handle(&mut self, msg: Disconnect, _: &mut Context<Self>) {
|
||||
println!("Someone disconnected");
|
||||
|
||||
let mut rooms: Vec<String> = Vec::new();
|
||||
|
||||
// remove address
|
||||
if self.sessions.remove(&msg.id).is_some() {
|
||||
// remove session from all rooms
|
||||
for (name, sessions) in &mut self.rooms {
|
||||
if sessions.remove(&msg.id) {
|
||||
rooms.push(name.to_owned());
|
||||
}
|
||||
}
|
||||
}
|
||||
// send message to other users
|
||||
for room in rooms {
|
||||
self.send_message(&room, "Someone disconnected", 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Handler for Message message.
|
||||
impl Handler<ClientMessage> for ChatServer {
|
||||
type Result = ();
|
||||
|
||||
fn handle(&mut self, msg: ClientMessage, _: &mut Context<Self>) {
|
||||
self.send_message(&msg.room, msg.msg.as_str(), msg.id);
|
||||
}
|
||||
}
|
||||
|
||||
/// Handler for `ListRooms` message.
|
||||
impl Handler<ListRooms> for ChatServer {
|
||||
type Result = MessageResult<ListRooms>;
|
||||
|
||||
fn handle(&mut self, _: ListRooms, _: &mut Context<Self>) -> Self::Result {
|
||||
let mut rooms = Vec::new();
|
||||
|
||||
for key in self.rooms.keys() {
|
||||
rooms.push(key.to_owned())
|
||||
}
|
||||
|
||||
MessageResult(rooms)
|
||||
}
|
||||
}
|
||||
|
||||
/// Join room, send disconnect message to old room
|
||||
/// send join message to new room
|
||||
impl Handler<Join> for ChatServer {
|
||||
type Result = ();
|
||||
|
||||
fn handle(&mut self, msg: Join, _: &mut Context<Self>) {
|
||||
let Join { id, name } = msg;
|
||||
let mut rooms = Vec::new();
|
||||
|
||||
// remove session from all rooms
|
||||
for (n, sessions) in &mut self.rooms {
|
||||
if sessions.remove(&id) {
|
||||
rooms.push(n.to_owned());
|
||||
}
|
||||
}
|
||||
// send message to other users
|
||||
for room in rooms {
|
||||
self.send_message(&room, "Someone disconnected", 0);
|
||||
}
|
||||
|
||||
self.rooms
|
||||
.entry(name.clone())
|
||||
.or_insert_with(HashSet::new)
|
||||
.insert(id);
|
||||
|
||||
self.send_message(&name, "Someone connected", id);
|
||||
}
|
||||
}
|
112
websockets/chat/static/websocket.html
Normal file
112
websockets/chat/static/websocket.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Chat!</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
window.onload = () => {
|
||||
let conn = null
|
||||
|
||||
const log = (msg) => {
|
||||
div_log.innerHTML += msg + '<br>'
|
||||
div_log.scroll(0, div_log.scrollTop + 1000)
|
||||
}
|
||||
|
||||
const connect = () => {
|
||||
disconnect()
|
||||
|
||||
const wsUri =
|
||||
(window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
|
||||
window.location.host +
|
||||
'/ws/'
|
||||
|
||||
conn = new WebSocket(wsUri)
|
||||
log('Connecting...')
|
||||
|
||||
conn.onopen = function () {
|
||||
log('Connected.')
|
||||
update_ui()
|
||||
}
|
||||
|
||||
conn.onmessage = function (e) {
|
||||
log('Received: ' + e.data)
|
||||
}
|
||||
|
||||
conn.onclose = function () {
|
||||
log('Disconnected.')
|
||||
conn = null
|
||||
|
||||
update_ui()
|
||||
}
|
||||
}
|
||||
|
||||
const disconnect = () => {
|
||||
if (conn) {
|
||||
log('Disconnecting...')
|
||||
conn.close()
|
||||
conn = null
|
||||
|
||||
update_ui()
|
||||
}
|
||||
}
|
||||
|
||||
const update_ui = () => {
|
||||
if (!conn) {
|
||||
span_status.textContent = 'disconnected'
|
||||
btn_connect.textContent = 'Connect'
|
||||
} else {
|
||||
span_status.textContent = `connected (${conn.protocol})`
|
||||
btn_connect.textContent = 'Disconnect'
|
||||
}
|
||||
}
|
||||
|
||||
btn_connect.onclick = () => {
|
||||
if (!conn) {
|
||||
connect()
|
||||
} else {
|
||||
disconnect()
|
||||
}
|
||||
|
||||
update_ui()
|
||||
}
|
||||
|
||||
btn_send.onclick = () => {
|
||||
if (!conn) return
|
||||
|
||||
const text = input_text.value
|
||||
log('Sending: ' + text)
|
||||
conn.send(text)
|
||||
|
||||
input_text.value = ''
|
||||
input_text.focus()
|
||||
}
|
||||
|
||||
input_text.onkeyup = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
btn_send.click()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3>Chat!</h3>
|
||||
<div>
|
||||
<button id="btn_connect">Connect</button>
|
||||
Status: <span id="span_status">disconnected</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="div_log"
|
||||
style="width: 20em; height: 15em; overflow: auto; border: 1px solid black"
|
||||
></div>
|
||||
|
||||
<input id="input_text" type="text" />
|
||||
<input id="btn_send" type="button" value="Send" />
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user