IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nix fmt
All checks were successful
checks-impure / test (pull_request) Successful in 2m19s
Details
checks / test (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
Luis-Hebendanz
2023-11-26 12:47:16 +01:00
parent b034bd11f1
commit 258bf656cf
6 changed files with 216 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
pkgs/clan-cli/clan_cli/webui/routers/messenger.html
View File

@@ -1,202 +1,205 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$(document).ready(function(){
if (typeof WebSocket != 'undefined') {
$('#ask').show();
} else {
$('#error').show();
}
// join on enter
$('#ask input').keydown(function(event) {
if (event.keyCode == 13) {
$('#ask a').click();
}
})
// join on click
$('#ask a').click(function() {
join($('#ask input').val());
$('#ask').hide();
$('#channel').show();
$('input#message').focus();
});
function join(name) {
var host = window.location.host.split(':')[0];
var ws = new WebSocket("ws://localhost:2979/ws2");
var container = $('div#msgs');
ws.onmessage = function(evt) {
var obj = JSON.parse(evt.data);
if (typeof obj != 'object') return;
console.log("Received: " + obj);
var action = obj['action'];
var struct = container.find('li.' + action + ':first');
if (struct.length < 1) {
console.log("Could not handle: " + evt.data);
return;
}
var msg = struct.clone();
msg.find('.time').text((new Date()).toString("HH:mm:ss"));
if (action == 'message') {
var matches;
if (matches = obj['message'].match(/^\s*[\/\\]me\s(.*)/)) {
msg.find('.user').text(obj['user'] + ' ' + matches[1]);
msg.find('.user').css('font-weight', 'bold');
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
if (typeof WebSocket != "undefined") {
$("#ask").show();
} else {
msg.find('.user').text(obj['user']);
msg.find('.message').text(': ' + obj['message']);
$("#error").show();
}
} else if (action == 'control') {
msg.find('.user').text(obj['user']);
msg.find('.message').text(obj['message']);
msg.addClass('control');
}
if (obj['user'] == name) msg.find('.user').addClass('self');
container.find('ul').append(msg.show());
container.scrollTop(container.find('ul').innerHeight());
}
// join on enter
$("#ask input").keydown(function (event) {
if (event.keyCode == 13) {
$("#ask a").click();
}
});
$('#channel form').submit(function(event) {
event.preventDefault();
var input = $(this).find(':input');
var msg = input.val();
if (msg) {
ws.send(JSON.stringify({ action: 'message', user: name, message: msg }));
// join on click
$("#ask a").click(function () {
join($("#ask input").val());
$("#ask").hide();
$("#channel").show();
$("input#message").focus();
});
function join(name) {
var host = window.location.host.split(":")[0];
var ws = new WebSocket("ws://localhost:2979/ws2");
var container = $("div#msgs");
ws.onmessage = function (evt) {
var obj = JSON.parse(evt.data);
if (typeof obj != "object") return;
console.log("Received: " + obj);
var action = obj["action"];
var struct = container.find("li." + action + ":first");
if (struct.length < 1) {
console.log("Could not handle: " + evt.data);
return;
}
var msg = struct.clone();
msg.find(".time").text(new Date().toString("HH:mm:ss"));
if (action == "message") {
var matches;
if ((matches = obj["message"].match(/^\s*[\/\\]me\s(.*)/))) {
msg.find(".user").text(obj["user"] + " " + matches[1]);
msg.find(".user").css("font-weight", "bold");
} else {
msg.find(".user").text(obj["user"]);
msg.find(".message").text(": " + obj["message"]);
}
} else if (action == "control") {
msg.find(".user").text(obj["user"]);
msg.find(".message").text(obj["message"]);
msg.addClass("control");
}
if (obj["user"] == name) msg.find(".user").addClass("self");
container.find("ul").append(msg.show());
container.scrollTop(container.find("ul").innerHeight());
};
$("#channel form").submit(function (event) {
event.preventDefault();
var input = $(this).find(":input");
var msg = input.val();
if (msg) {
ws.send(
JSON.stringify({ action: "message", user: name, message: msg }),
);
}
input.val("");
});
}
});
</script>
<style type="text/css" media="screen">
* {
font-family: Georgia;
}
input.val('');
});
}
});
</script>
<style type="text/css" media="screen">
* {
font-family: Georgia;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div.bordered {
margin: 0 auto;
margin-top: 100px;
width: 600px;
padding: 20px;
text-align: center;
border: 10px solid #ddd;
-webkit-border-radius: 20px;
}
#error {
background-color: #BA0000;
color: #fff;
font-weight: bold;
}
#ask {
font-size: 20pt;
}
#ask input {
font-size: 20pt;
padding: 10px;
margin: 0 10px;
}
#ask span.join {
padding: 10px;
background-color: #ddd;
-webkit-border-radius: 10px;
}
#channel {
margin-top: 100px;
height: 480px;
position: relative;
}
#channel div#descr {
position: absolute;
left: -10px;
top: -190px;
font-size: 13px;
text-align: left;
line-height: 20px;
padding: 5px;
width: 630px;
}
div#msgs {
overflow-y: scroll;
height: 400px;
}
div#msgs ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
div#msgs li {
line-height: 20px;
}
div#msgs li span.user {
color: #ff9900;
}
div#msgs li span.user.self {
color: #aa2211;
}
div#msgs li span.time {
float: right;
margin-right: 5px;
color: #aaa;
font-family: "Courier New";
font-size: 12px;
}
div#msgs li.control {
text-align: center;
}
div#msgs li.control span.message {
color: #aaa;
}
div#input {
text-align: left;
margin-top: 20px;
}
div#input #message {
width: 600px;
border: 5px solid #bbb;
-webkit-border-radius: 3px;
font-size: 30pt;
}
</style>
</head>
<body>
<div id="error" class="bordered" style="display: none;">
This browser has no native WebSocket support.<br/>
Use a WebKit nightly or Google Chrome.
</div>
<div id="ask" class="bordered" style="display: none;">
Name: <input type="text" id="name" /> <a href="#"><span class="join">Join!</span></a>
</div>
<div id="channel" class="bordered" style="display: none;">
<div id="descr" class="bordered">
<strong>Tip:</strong> Open up another browser window to chat.
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div.bordered {
margin: 0 auto;
margin-top: 100px;
width: 600px;
padding: 20px;
text-align: center;
border: 10px solid #ddd;
-webkit-border-radius: 20px;
}
#error {
background-color: #ba0000;
color: #fff;
font-weight: bold;
}
#ask {
font-size: 20pt;
}
#ask input {
font-size: 20pt;
padding: 10px;
margin: 0 10px;
}
#ask span.join {
padding: 10px;
background-color: #ddd;
-webkit-border-radius: 10px;
}
#channel {
margin-top: 100px;
height: 480px;
position: relative;
}
#channel div#descr {
position: absolute;
left: -10px;
top: -190px;
font-size: 13px;
text-align: left;
line-height: 20px;
padding: 5px;
width: 630px;
}
div#msgs {
overflow-y: scroll;
height: 400px;
}
div#msgs ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
div#msgs li {
line-height: 20px;
}
div#msgs li span.user {
color: #ff9900;
}
div#msgs li span.user.self {
color: #aa2211;
}
div#msgs li span.time {
float: right;
margin-right: 5px;
color: #aaa;
font-family: "Courier New";
font-size: 12px;
}
div#msgs li.control {
text-align: center;
}
div#msgs li.control span.message {
color: #aaa;
}
div#input {
text-align: left;
margin-top: 20px;
}
div#input #message {
width: 600px;
border: 5px solid #bbb;
-webkit-border-radius: 3px;
font-size: 30pt;
}
</style>
</head>
<body>
<div id="error" class="bordered" style="display: none">
This browser has no native WebSocket support.<br />
Use a WebKit nightly or Google Chrome.
</div>
<div id="msgs">
<ul>
<li class="message" style="display: none">
<span class="user"></span><span class="message"></span>
<span class="time"></span>
</li>
</ul>
<div id="ask" class="bordered" style="display: none">
Name: <input type="text" id="name" />
<a href="#"><span class="join">Join!</span></a>
</div>
<div id="input">
<form><input type="text" id="message" /></form>
<div id="channel" class="bordered" style="display: none">
<div id="descr" class="bordered">
<strong>Tip:</strong> Open up another browser window to chat.
</div>
<div id="msgs">
<ul>
<li class="message" style="display: none">
<span class="user"></span><span class="message"></span>
<span class="time"></span>
</li>
</ul>
</div>
<div id="input">
<form><input type="text" id="message" /></form>
</div>
</div>
</div>
</body>
</html>
</body>
</html>

20
pkgs/clan-cli/clan_cli/webui/routers/socket_manager2.py
View File

@@ -1,13 +1,12 @@
# Requires: `starlette`, `uvicorn`, `jinja2`
# Run with `uvicorn example:app`
import logging
import os
import anyio
from broadcaster import Broadcast
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi import APIRouter, WebSocket
from fastapi.responses import HTMLResponse
from fastapi import APIRouter, Response
import os
import logging
import asyncio
log = logging.getLogger(__name__)
router = APIRouter()
@@ -18,15 +17,14 @@ brd = Broadcast("memory://")
@router.get("/ws2_example")
async def get() -> HTMLResponse:
html = open(f"{os.getcwd()}/webui/routers/messenger.html").read()
return HTMLResponse(html)
@router.websocket("/ws2")
async def chatroom_ws(websocket: WebSocket) -> None:
await websocket.accept()
async with anyio.create_task_group() as task_group:
# run until first is complete
async def run_chatroom_ws_receiver() -> None:
@@ -47,8 +45,8 @@ async def chatroom_ws_receiver(websocket: WebSocket) -> None:
async def chatroom_ws_sender(websocket: WebSocket) -> None:
async with brd.subscribe(channel="chatroom") as subscriber:
log.warning("====>Subscribed to chatroom channel")
async for event in subscriber:
log.warning(f"Sending message: {event.message}")
if subscriber is None:
log.error("Subscriber is None")
return
async for event in subscriber: # type: ignore
await websocket.send_text(event.message)