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

2
pkgs/clan-cli/clan_cli/dirs.py
View File

@@ -4,8 +4,8 @@ import sys
from pathlib import Path
from typing import Optional
from .clan_types import FlakeName
from .errors import ClanError
from .types import FlakeName
log = logging.getLogger(__name__)

2
pkgs/clan-cli/clan_cli/webui/api_inputs.py
View File

@@ -5,8 +5,8 @@ from typing import Any
from pydantic import AnyUrl, BaseModel, validator
from pydantic.tools import parse_obj_as
from ..clan_types import validate_path
from ..dirs import clan_data_dir, clan_flakes_dir
from ..types import validate_path
DEFAULT_URL = parse_obj_as(AnyUrl, "http://localhost:8000")

9
pkgs/clan-cli/clan_cli/webui/app.py
View File

@@ -1,16 +1,16 @@
import logging
from contextlib import asynccontextmanager
from typing import Any
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.routing import APIRoute
from fastapi.staticfiles import StaticFiles
from contextlib import asynccontextmanager
from typing import Any
from ..errors import ClanError
from .assets import asset_path
from .error_handlers import clan_error_handler
from .routers import health, root, socket_manager, socket_manager2
from .routers import health, root, socket_manager2
origins = [
"http://localhost:3000",
@@ -38,12 +38,11 @@ def setup_app() -> FastAPI:
app.include_router(health.router)
app.include_router(socket_manager.router)
app.include_router(socket_manager2.router)
# Needs to be last in register. Because of wildcard route
app.include_router(root.router)
app.add_exception_handler(ClanError, clan_error_handler) # type: ignore
app.add_exception_handler(ClanError, clan_error_handler) # type: ignore
app.mount("/static", StaticFiles(directory=asset_path()), name="static")

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)

5
pkgs/clan-cli/pyproject.toml
View File

@@ -49,6 +49,11 @@ ignore_missing_imports = true
module = "pytest.*"
ignore_missing_imports = true
[[tool.mypy.overrides]]
module = "anyio.*"
ignore_missing_imports = true
[[tool.mypy.overrides]]
module = "setuptools.*"
ignore_missing_imports = true