Gtug girls meetup web socket handson

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