macでVBScriptでWebSocketで10分でチャットを作って親御さんと会話してみた話

昨日の大和市でのプログラミング教室、「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分ライブコーディング にどうぞ!










.

One thought on “macでVBScriptでWebSocketで10分でチャットを作って親御さんと会話してみた話

  1. Pingback: 『デジタル世界のお仕事』 in 大和市! 〜ぼくはプログラムに関する仕事につきたいと思いました〜 – about yrm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s