共用サーバーで非同期通信チャットアプリを作る

Aug 21 2018

今日は、さくらサーバーのライトプランという制限が多いサーバーでなんとか非同期通信を実現すべく奮闘したので、その記録をしたいと思います。

皆さん久しぶりです、CreativeGPと申します。

今日は、さくらサーバーのライトプランという制限が多いサーバーでなんとか非同期通信を実現すべく奮闘したので、その記録をしたいと思います。

作ったチャットアプリ Chatter

ソースコード GitHub3

非同期通信、双方向通信

馴染みのある同期通信は、普段ブラウザがやっているようにURLを指定して、サーバーにアクセスして、サーバーからデータを取得して其れで終わりです。

しかし、非同期なWebサービスを作ろうと思ったときには時に特殊な通信方法を取らなければならないと思います。つまり、前述した同期通信だけでは実現しにくい処理ですね。

また、クライアントがサーバーに行ってデータを取ってくる、ということは良くありますが、その逆の通信も馴染みがありません。

色々な方法がある

さて、この非同期通信や双方向通信を行う方法ですが、本当に色々な方法があるようです。(需要が昔からあったため昔から色々な方法が模索されてきた

AJAX

馴染みがあるやつですね。JavaScriptを使用して非同期通信を実現します。

WebRTC

Web上でP2Pでリアルタイムな通信を行うための規格群です。最初はこれを使って色々作ろうと思っていましたが、自分のサーバーでは動かない(常在プロセスを作らなければならない)ということを知り、断念しました。

WebSocket

WebSocketは非同期で双方向通信をすることが出来る、とても便利なHTTPと同じレベルのプロトコルです。これはとても使い勝手が良く、コードも書き易かったのですが、これも自分のサーバーでは動かないことを知り、断念しました。

Commet

ここからは、如何にしてサーバーからクライアントに情報を送るかということにフォーカスした技術を紹介します。これはちょっと昔に使われていた(今は上のやつで代替できるため)やつらしいですが、HTTPで実現できます。アイデアは長く通信を保っておくということです。

クライアントはサーバーにリクエストを送ります。しかし、サーバーはクライアントにすぐレスポンスを返しません。イベントが起きた時に返すのです1。こうすることによってプロトコルを変えずにゴニョゴニョすることができます。

しかし問題点もたくさんあります。例えば、サーバーがイベントを返して、また次のためにクライアントがレスポンスをサーバーに返す時にまたイベントが発生した場合にサーバーはクライアントに情報を伝えるすべがなく、ラグが生じてしまう、という問題があります。

EventSource

今回使ったのはこれです。これはHTTPで非同期・Server->Client通信が出来るもので、仕様はW3Cによって定められており(Server-Sent Events)、専用のJavaScriptのAPIが用意されています。見た所他の技術より静かと言うか、情報も比較的少ないですし、活気がないような気がしました。しクライアントの実装も問題があったところがあったとか無かったとかで若干心配なこともありますが、これを使うことによってやっと共用サーバーでもリッチな通信をすることが出来るようになりました。

情報がないと言っても、優れた記事が何個かあるかつ、仕様も短く、シンプルなので簡単に実装できると思います2ので、記事を載せておくだけにします。

Server Sent Events最小限のサンプル(PHP)

EventSource 覚え書き - JavaScriptで遊ぶよ - g:javascript

この二つと、先程の仕様(短いので!)

Server-Sent Events

を見れば完璧だと思います。

Notes

1 そのままだと駄目なので、サーバーからなんか言われると、クライアントはまた次のイベントを取得できるように準備するためレスポンスを投げます。

2 少なくともWebRTCよりは(STUN/TURNとか置かなきゃだし)

3 なんか公開するのってどうなのと思ったけど大丈夫だと思ってるので大丈夫かなと(意味不

Read more?

数学 I(三角法) を勉強していく上で思ったこととかメモ

Oct 11 2018

黄茶の旅日記の様なものです。数Iの三角法です。

画面指紋認証の仕組みって

Jun 11 2018

最近、画面指紋認証の記事を見かけまして、「そういやこれどうやって出来てるのかな...」と思って記事探してみてもなかったので(英語でも少なかった)、幾つかのページ(参考文献)から引っ張り出してきた情報を元に記事を書きます

Rustにおけるファイル分割

Rustは、モジュールシステムも色々決まりがあって整っているので、単にファイルを分けて書こうと思った場合にも、整った綺麗な書き方をするには難しい言語に感じます。自分も、丁度Rustでプログラムを書いていた時に迷って良いリポジトリから良い書き方を見つけたのでその紹介をしようと思います

Jul 19 2018

042933964230の暗号について調べてみた

Apr 23 2018

謎のサイトと言われて少し前に話題になったやつを調べてみました

日本一早いサイト選手権

阿部寛のホームページが爆速なのでそれよりはやいページ無いかなぁと適当に探してみた結果です。

Sep 22 2018

[円柱の体積文字列] 英単語をgrepできるサイトを作りました

Sep 17 2018

円の体積文字列で別の例を探すために英単語をgrep出来るサイトを作りました

数学 I(二次関数) を勉強していく上で思ったこととかメモ

黄茶の二次関数が終わったので、その学習中に思ったことを適当にメモしておきます

Sep 16 2018

IEは最高のブラウザ / IE is the best browser

Sep 16 2018

世間では何故かIEが蔑まれているようですが、そんなブラウザにも素晴らしいところが沢山あるのです

Explain Backpropagation Like I'm Five

Jul 13 2018

Recently, there are many successful news with the artificial intelligence (AI). Machine translation, object detection, automatic modeling, motion capture and so on... Even the optical illusion that only your brain should be able to perform has been achieved by the AI.

線の長さを積分で考えてみる

Sep 11 2018

今回は、前回積分を使って面積(小さな面積の集合)を求めたので、今回は線(小さな線の集合)の長さを求めていければ良いなぁみたいな感じでやっていけたらと思っています。

積分で原始関数の差を求めると元の函数の面積が出る理由

今回は積分の面白い性質である、原始関数の差が元の函数の面積となるという性質についてそうなる理由を気持ちだけでも書いていきます。

Sep 04 2018

「国語に関する世論調査」を読んで思ったこととか

Aug 28 2018

国の日本語に関する調査を見て最近の日本語の変化について知りました。

新しいブログシステムを構築したのでやったことを記録

前の古臭いブログシステムのままだと嫌だったので、新しいブログシステムを構築しました。

Aug 22 2018

前にブログに追加した機能

前にブログに追加した機能が使えるかどうかのテスト用.

Aug 21 2018

[素因数分解] Trial Division / 試し割り法

試し割り法は素因数分解の一番愚直なアルゴリズムです。この解説をします。

Aug 19 2018