ProcessingからWebページを遷移させる方法を試したのでメモしておく。

かなりトリッキーな実装なのでなかなか使う機会はないと思う。

ソースコード

https://github.com/enkatsu/ProcessingInteractiveWebPage/tree/main

構成

学生の作品に組み込むための実装なので、学習コストを浅るためにProcessing自体をWebサーバとして動作するように構成した。 この機能はProcessing HTTP Serverによって実装した。 起動したWebサーバは ./data 以下のファイルをHTTPで配信する。 配信されたHTMLをブラウザから開くと、ProcessingとブラウザがWebSocketによって接続される。 WebSocketサーバも、Websockets for ProcessingによってProcessing上で動作している。

このサンプルコードでは、Processingが ws://localhost:8000/switch-page にページのIDを送信することで、ブラウザがページのIDを受け取って遷移先に移動するように組んである。

シーケンス図

sequenceDiagram
    box Processing
        participant ws as Websocket Server
        participant http as HTTP Server
    end
    participant bw as Browser

    bw ->> http: HTTP Request
http://localhost:8000/page1.html
    http ->> bw: HTTP Response
    
    bw ->> ws: Connect
ws://localhost:8000/switch-page
    
    Note over ws: キーボードの '2' を押す
    ws ->> bw: メッセージ "2" が送信される
    bw ->> http: HTTP Request
http://localhost:8000/page2.html
    http ->> bw: HTTP Response

    Note over ws: キーボードの '1' を押す
    ws ->> bw: メッセージ "1" が送信される
    bw ->> http: HTTP Request
http://localhost:8000/page1.html
    http ->> bw: HTTP Response