sandbox/python-websocket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FastAPI-websocket, two channels

Browse Source
This commit is contained in:
marys
2025-09-30 13:28:58 +02:00
parent 5a14ab7be0
commit 26da9259ea
2 changed files with 70 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
html/index.html
View File

@@ -5,37 +5,53 @@
</head>
<body>
<h1>WebSocket Chat</h1>
<h2>Your ID: <span id="ws-id"></span></h2>
<form action="" onsubmit="sendMessage(event)">
<label>Item ID: <input type="text" id="itemId" autocomplete="off" value="foo"/></label>
<label>Token: <input type="text" id="token" autocomplete="off" value="some-key-token"/></label>
<button onclick="connect(event)">Connect</button>
<hr>
<label>Message: <input type="text" id="messageText" autocomplete="off"/></label>
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
<br>
<input type="text" id="messageText2" autocomplete="off"/>
<button onclick="sentMessage2(event)">Send 1</button>
</form>
Channel 1
<ul id='messages'>
</ul>
Channel 2
<ul id="messages2">
</ul>
<script>
var ws = null;
function connect(event) {
var itemId = document.getElementById("itemId")
var token = document.getElementById("token")
ws = new WebSocket("ws://localhost:8000/items/" + itemId.value + "/ws?token=" + token.value);
ws.onmessage = function(event) {
var messages = document.getElementById('messages')
var message = document.createElement('li')
var content = document.createTextNode(event.data)
message.appendChild(content)
messages.appendChild(message)
};
event.preventDefault()
}
var client_id = Date.now()
document.querySelector("#ws-id").textContent = client_id;
<!-- channel 1 -->
var ws_channel1 = new WebSocket(`ws://localhost:8000/ws/${client_id}`);
ws_channel1.onmessage = function(event) {
var messages = document.getElementById('messages')
var message = document.createElement('li')
var content = document.createTextNode(event.data)
message.appendChild(content)
messages.appendChild(message)
};
function sendMessage(event) {
var input = document.getElementById("messageText")
ws.send(input.value)
ws_channel1.send(input.value)
input.value = ''
event.preventDefault()
}
<!-- channel 2 -->
var ws_channel2 = new WebSocket(`ws://localhost:8000/ws1/${client_id}`);
ws_channel2.onmessage = function(event) {
var messages = document.getElementById('messages2')
var message = document.createElement('li')
var content = document.createTextNode(event.data)
message.appendChild(content)
messages.appendChild(message)
};
function sentMessage2(event) {
var input = document.getElementById("messageText2")
ws_channel2.send(input.value)
input.value = ''
event.preventDefault()
}
</script>
</body>
</html>
</html>