昨日の大和市でのプログラミング教室、「10分で作るチャットアプリ」。
プログラミング言語はオープンソースな「OpenVBS」、VBScript 互換。
$ ./oscript sample3.obs
このチャットはWebアプリ、上記コマンド “sample3.obs” で HTTPサーバを起動、これでルートが “wwwroot” ディレクトリでサーバ動作開始。
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script>
let sock = new WebSocket("ws://localhost:8000/chat.osk");
sock.onmessage = function(e){
let elm = document.createElement("li");
elm.innerText = e.data;
document.getElementById("output").insertBefore(elm, document.getElementById("output").firstChild);
};
</script>
</head>
<body>
<input type="text" onkeypress="if(event.keyCode==13){ sock.send(this.value); this.value=''; }">
<ul id="output"></ul>
</body>
</html>
“wwwroot” 内にこのようなファイル “chat.html” を作成、テキスト入力されると WebSocket でサーバーに送る、サーバーから着信があったら表示する、というシンプルなもの。
last = 0
client.send("Welcome!")
function on_data(data)
if len(data) then
application(application.contents.count) = data
end if
do while last < application.contents.count
client.send(application(last++))
loop
end function
WebSocket サービスはこちら “chat.osk”、着信があったらメモリに溜め込んで、まだ返していない会話を送り返す、というシンプルなもの。
ブラウザで http://localhost:8000/chat.html にアクセスしてできあがり！昨日はこのローカルサーバーを ngrok でグローバルからアクセス、親御さんとチャットを体験。
このチャットは OpenVBS の最新リリース ver.20191209 にサンプルとして同梱、マルチスレッド対応はまだですが 10分ライブコーディング にどうぞ！
.
about yrm 
Pingback: 『デジタル世界のお仕事』 in 大和市！ 〜ぼくはプログラムに関する仕事につきたいと思いました〜 – about yrm