2020-07-05
やること宣言
gaaamii.icon
勉強中メモ
gaaamii.icon
そもそもなんでServer-Sent Eventsでなんかつくりたいのか
やりたいこと
まず、かんたんにServer-Sent Events体験をするために、毎秒時刻データをサーバからpushしてクライアントがそれを表示するみたいなのをやってみたい
次に、チャットアプリケーションを実装してみる
毎秒時刻データをサーバからpushしてクライアントがそれを表示する
サーバー側
久しぶりにrails newしてみるか
せっかくなので最新のRails(6.0.3.2)とRuby(2.7.1)でやってみよう
--apiつけるの忘れてwebpackerとか入れられてしまった。やりなおし。
--apiだとめっちゃ速いな
AcitonController::Liveのドキュメントを読む
You must call close on your stream when you're finished, otherwise the socket may be left open forever.
close呼ぶのは忘れちゃいかんな
クライアント側
セットアップとか面倒なので素のJSで書く
うまくいかないな。
code:なんかうまくいかない.sh
gaaamii@gaaamii-MacBook-Pro:~/sse_example (feature/push_datetime_every_seconds *)$ bin/rails s
=> Booting Puma
=> Rails 6.0.3.2 application starting in development
=> Run rails server --help for more startup options
Puma starting in single mode...
* Version 4.3.5 (ruby 2.7.1-p83), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://::1:3000 Use Ctrl-C to stop
Started GET "/datetime/stream" for ::1 at 2020-07-05 12:28:18 +0900
(0.6ms) SELECT sqlite_version(*)
Processing by DatetimeController#stream as
statusがpendingで止まっちゃう
CORSが原因だったぽい。
できた
https://gyazo.com/d7b2ee3e534af5e8d66e07bf141120bc
クライアント側のコードはこう
code:index.js
const apiHost = "localhost:3000";
window.onload = () => {
const eventSource = new EventSource(//${apiHost}/datetime/stream, { withCredentials: true });
eventSource.addEventListener('message', (e) => {
const currentTime = document.getElementById('current_time');
currentTime.innerHTML = ${e.data}
});
};
やったこと
gaaamii.icon