ProcessingからWebページを遷移させる

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を受け取って遷移先に移動するように組んである。

シーケンス図

ProcessingBrowserHTTP ServerWebsocket ServerBrowserHTTP ServerWebsocket Serverキーボードの '2' を押すキーボードの '1' を押すHTTP Requesthttp://localhost:8000/page1.htmlHTTP ResponseConnectws://localhost:8000/switch-pageメッセージ "2" が送信されるHTTP Requesthttp://localhost:8000/page2.htmlHTTP Responseメッセージ "1" が送信されるHTTP Requesthttp://localhost:8000/page1.htmlHTTP Response

ProcessingからWebページを遷移させる

By Katsuya Endoh, 2023-12-10