WebSocket を使ってたいへんシンプルなチャットアプリを作りました．サーバのコードはこんなにシンプル（エラー処理と切断処理は省略しています）．
#!/usr/bin/env python
import asyncio
import websockets
clients = {}
async def echo(soc):
async for msg in soc:
if not (soc in clients):
clients[soc] = msg
print(f'{msg} is registered')
for s in clients:
await s.send(f’{clients[soc]} が参加しました')
else:
print(f'RECV: {msg}')
for s in clients:
await s.send(f'{clients[soc]}: {msg}')
async def main():
async with websockets.serve(echo, port=8765, ping_timeout=None):
await asyncio.Future()
asyncio.run(main())クライアントのコードもこんなに簡単！まずは，HTMLのコード．
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>A Simple BBS</title>
<meta name="description" content="WebSockets TEST">
<meta name="author" content="Jun IIO">
<script src="jquery-3.6.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<h1>シンプル・チャット・システム</h1>
<div>
名前:
<input id="regname" type="text">
<button id="register">登録</button>
</div>
<div>
<textarea id="msgarea" cols=80 rows=10
readonly disabled="disabled"></textarea>
</div>
<div>
<input id="chatmsg" type="text" size=80 disabled="disabled">
<button id="send" disabled="disabled">送信</button>
</div>
</body>
</html>JavaScriptのコードも，とってもシンプル．
$(function(){
let socket = new WebSocket("ws://localhost:8765");
$("#register").on("click", function(event) {
name = $("#regname").val();
if (name != "") {
socket.send(name);
$("#register").prop("disabled", true);
$("#regname").prop("disabled", true);
$("#msgarea").prop("disabled", false);
$("#chatmsg").prop("disabled", false);
$("#send").prop("disabled", false);
};
});
socket.onmessage = function(event) {
text = $("#msgarea").val();
$("#msgarea").val(text + event.data + "\n");
};
$("#send").on("click", function(event) {
msg = $("#chatmsg").val();
if (msg != "") {
socket.send(msg);
$("#chatmsg").val("");
};
});
});
0 件のコメント:
コメントを投稿