📂プログラミング

JavaScriptでlocalhostを介してJuliaサーバーにデータを送信する例

ショーケース

Send ‘A’ Send ‘B’

左のボタンをクリックすると ‘A’ というメッセージを、右のボタンをクリックすると ‘B’ というメッセージを Julia サーバに送信する。 Julia サーバは HTTP.jl パッケージ を通じてこのメッセージを受け取り、^serve コンソールに出力する。

---

コード

HTML

<button onclick="sendData('A')">Send 'A'</button>
<button onclick="sendData('B')">Send 'B'</button>

• onclick: ボタンがクリックされると sendData 関数が実行される。

javascript

<script>
    function sendData(message) {
        fetch('http://localhost:8000', {
            method: 'POST',
            headers: { 'Content-Type': 'text/plain' },
            body: message
        });
    }
</script>

• function sendData(message): message を入力として受け取る。上の例ではそれぞれ ‘A’ と ‘B’ だった。
• fetch('http://localhost:8000': ローカルホストのポート8000にあるサーバにデータを送信する。Julia 側でも同じポート番号を使う必要がある。

julia

次のように書かれた server.jl ファイルを実行してデータを受信する。

using HTTP

const CORS_HEADERS = [
    "Access-Control-Allow-Origin" => "*",
    "Access-Control-Allow-Methods" => "POST, GET, OPTIONS",
    "Access-Control-Allow-Headers" => "Content-Type"
]
function handler(req::HTTP.Request)
    if req.method == "OPTIONS"
        return HTTP.Response(200, CORS_HEADERS)
    elseif req.method == "POST"
        body = String(req.body)
        println("Received:", body)
        return HTTP.Response(200, vcat(CORS_HEADERS, "Content-Type" => "text/plain"), 
                             "Server received: " * body)
    else
        return HTTP.Response(405, "Method Not Allowed")
    end
end

server = HTTP.serve(handler, "0.0.0.0", 8000)

• const CORS_HEADERS: CORS^{Cross-Origin Resource Sharing} ヘッダーを設定する。これは別のオリジンのウェブページがこのサーバにアクセスできるようにするためのものだ。
• HTTP.serve(handler, "0.0.0.0", 8000): ローカルホストのポート8000でリクエストを受け付けている。JavaScript から送るときも同じポート番号を使う必要がある。