Appで簡易サーバを作ってみます。AppsはHTML5を使用して作成され、Chromeをプラットフォームとして動作します。Chromeの画面内部で動くのではなく、アプリケーションごとに個別の画面を持ち、デスクトップ型アプリケーションと同様に振る舞います。様々なAPIが提供され、その種類もどんどん増えてきており、ネイティブアプリに近いことを実装できるようになってきました。Appsを作ってみると、HTML5の世界が広がります。APIが提供され、UDPやTCPでの通信を実行できるようになりました。バージョン33からは、chrome.socketがdeprecatedとなり、代わりに以下のAPIが提供されています。chrome.sockets.udpchrome.sockets.tcpchrome.sockets.tcpServerこの新しいAPIを使用して簡易Webサーバを構築してみたいと思います。Appsの作り方は知っていることを前提にしています。worldと表示する簡易サーバです。このアプリケーションは次の4つのファイルから構成されます。画面内部の処理を記述(後述)manifest.jsonまず、Manifestファイルで最低限のパーミッションのみを記述しておきます。今回は、sockets.tcpとsockets.tcpServerを使用します。これらのパーミッションは、"permissions"の外に記述します。[]}background.jsbackground.jsでは、単に画面を開きます。200x300の画面をディスプレイ左上に表示します。});});index.html開かれた画面では、main.jsを読み込むだけとします。アプリを作成する際には、画面の内容や処理結果を表示しますが、今回は全てconsole.logで確認しましょう。</body></html>サーバの構築サーバでのデータ送受信の手順は次のようになります。Appsで記述すると以下のようになります。text;}chrome.sockets.tcpServer.createでサーバ用のソケットを生成します。chrome.sockets.tcpServer.listenで3000番ポートでリクエストを待ちます。chrome.sockets.tcpServer.onAccept.addListenerを使用して、HTTPリクエストを受け取る準備をします。このコールバックは、3000番ポートへのアクセスが発生するたびに呼び出されます。コールバック内で、クライアント用のソケットIDを受け取り、chrome.sockets.tcp.setPausedでソケットの停止状態を解除します。ここまで来ると、データを受信できます。データの受信は、chrome.sockets.tcp.onReceive.addListenerへ渡したコールバック内部にて行います。受信データはArrayBuffer型から文字列に変換し、その内容を確認しましょう。ヘッダが長い場合や、POSTやKeep-Alive等を考慮する場合、データの取得はもっと複雑になります。今回は短いGETリクエストのみを対象とし、簡略化しています。Webサーバでは、HTTPリクエスト内容を解釈し、レスポンスを決定します。world"を返すこととします。データの送信には、chrome.sockets.tcp.sendを使用します。送信データはArrayBuffer型で渡す必要があります。データの送信が終わったら、リクエスト用ソケットをchrome.sockets.tcp.disconnectで接続を解除し、chrome.sockets.tcp.closeでリクエスト用ソケットを破棄します。HTTPリクエストが届くたびに、データの受信・送信処理とソケット破棄が実行されます。今回は記述していませんが、サーバを停止する場合には、chrome.sockets.tcpServer.diconnectを使用します。サーバ用ソケットを破棄するには、chrome.sockets.tcpServer.closeを使用します。Appsを起動して、ブラウザからhttp://localhost:3000へアクセスして下さい。worldと表示されていれば成功です。上手く動かなければ、アプリを再起動(もしくは再読み込み)してください。Toolsを表示し、ログを確認すれば、HTTPリクエストが表示されています。worldを返す単純なサーバを構築しました。これだけの内容でも、HTML5の可能性を味わえたと思います。本格的にサーバを構築する場合、HTTPリクエストの解析と解釈、HTTPレスポンスでのデータ送信等を実装していく必要があります。Webサーバを実装できれば、その先のWebSocketサーバなども実装できます。興味があれば、挑戦してみて下さい。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。