gtug girls meetup web socket handson
TRANSCRIPT
WebSocketリアルタイム Web を切り開く
新しいプロトコル
Jxck
● id: Jxck● github: Jxck● twitter: jxck_● blog: http://d.hatena.ne.jp/jxck● Love: music
なにそれおいしいの?
WebSocket?
"みんなで文書を共有しよう"
これまでの Web
サーバに上げた文書(HTML)を
示す場所(URL)を教えれば
ソフト(Browser)を使ってそれを
取得(HTTP)できるし良い感じ。
"みんなで文書を共有しよう"
HTTP でドキュメントを取得
文書
HTTP でチャット
F5 を連打!!?
Pull ベースの Web
Web 2.0 的なアレでは
もう少し賢く(Long Polling)
文書？ Pull？
実際に送りたいデータ。
小さい、しかも双方向で送りたい。
{
"message" : "hello world",
"author" : "Jxck"
}
もっと効率よくできないか？
● Push するために Pull しまくってる
○ HTTPがもともとそういうものだからしょうがない
● やり取りするメッセージも小さいのに
○ HTTPはもと(ry
● もっとカジュアルに送受信したい
○ (ry
よろしい、ならば HTML5 だ
よんだ？
Push (というか双方向)
WebSocket
● 小さいデータを
● 沢山の人と
● 頻繁に
● 効率よく
● 双方向でやりとりする
チャットやゲームに最適
WebSocket を使ってプログラミング
をしてもいいんだけど、、
Q: 先生 WebSocket が繋がりません！
● 非対応ブラウザ● ネットワーク環境● ウイルス対策ソフト● 大人の事情
A: Socket.IO というのがあってだな。
Socket.IO のポジション
ブラウザの API を生でゴリゴリ
ライブラリでサクサク
DOM jQuery
WebSocket Socket.IO
ココ
Socket.IO どうよ?
つながりにくい環境でもいい感じに通信してくれる。
あるといいな、があるんですよね。認証とか。
古いブラウザでも動きました!!
色んな言語で使えるのがいい。
みんな使ってたから
作者がイケメン
＊意見には個人差があります
Handson
Socket.IO を使ってみよう
2, サーバ側の実装
1, サーバに接続するブラウザ側の実装
http://54.250.126.97:3000/ これを作ります。
環境
Node.js のインストール
● 本家インストーラ● nodebrew
ハンズオンマテリアルhttps://github.com/Jxck/socket.io.chat-sample
$ node -v
v0.10.4
$ npm -v
1.2.18 (多少違ってもok)
Socket.IO.Chat-Sample
$ cd socket.io.chat-sample
$ cd handson
$ npm install
準備完了(おかしかったらチューターまで)
1. ブラウザ側の実装
AWS で実装済みのサーバ
サーバに接続するブラウザ側の実装
1. サーバと接続
2. メッセージ送信
3. メッセージ受信
1. ブラウザ側の実装
// サーバに接続(AWS)var socket = io.connect('http://54.250.126.97:3000/');$(function() { // 送信
$('#ok').on('click', function() { // クリックしたら
var message = $('#message').val(); // 中身を取って
socket.emit('message', message); // サーバに送信
});
// 受信
socket.on('message', function(data) { // 受信したら
var $li = $('<li>', { text: data }); // li を作って
$('#messages').append($li); // ul に追加
});});
起動方法
$ cd socket.io.chat-sample
$ cd handson
$ node server.js
実装したらサーバを起動
(おかしかったらチューターまで)
http://localhost:3000/ にアクセス
2. サーバ側の実装
node.js でサーバを実装
1. 接続の確認
2. メッセージ受信
3. メッセージ送信
サーバに接続するブラウザ側の実装
2. サーバ側の実装
// Socket.IOvar io = require('socket.io') , io = io.listen(server);
// クライアントが接続してきたあとio.sockets.on('connection', function(socket) { // メッセージを受信したら socket.on('message', function(data) { // 全てのクライアントに送り返す io.sockets.emit('message', data); console.log(data); });});
起動方法
$ cd socket.io.chat-sample
$ cd handson
$ node server.js
実装したらサーバを起動
(おかしかったらチューターまで)
http://localhost:3000/ にアクセス
まとめ
このページを読んでいるということは、今頃君はもうやり遂げたということだろう。おめでとう。
今回は Socket.IO を使ったチャットを作ってもらたわけだが、ど
うだっただろうか? なんか思ったよりも簡単で楽しいと思っていただけたなら本望だ。
もし余力があれば、今回のチャットを色々改造したり、 Socket.IO を使わない WebSocket のプログラミングにするなど、自分な
りのリアルタイム Web に挑戦してみて欲しい。
これからの Web を担う君たちには云々かんぬん。
健闘を祈る。
Jxck