Enviar búsqueda
Cargar
Gtug girls meetup web socket handson
•
15 recomendaciones
•
3,568 vistas
Jxck Jxck
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 31
Descargar ahora
Descargar para leer sin conexión
Recomendados
I visited JSConf + NodeConf + Joyent
I visited JSConf + NodeConf + Joyent
Jxck Jxck
Test it in Node.js
Test it in Node.js
Jxck Jxck
Nodefest2011-Live
Nodefest2011-Live
Jxck Jxck
Real Time App with Node.js
Real Time App with Node.js
Jxck Jxck
Node.js ― Hello, world! の1歩先へ。
Node.js ― Hello, world! の1歩先へ。
Tatsuya Tobioka
Heroku java
Heroku java
Kazuyuki Kawamura
Http2 on go1.6rc2
Http2 on go1.6rc2
Jxck Jxck
Next generation web talk @cross2013
Next generation web talk @cross2013
Jxck Jxck
Recomendados
I visited JSConf + NodeConf + Joyent
I visited JSConf + NodeConf + Joyent
Jxck Jxck
Test it in Node.js
Test it in Node.js
Jxck Jxck
Nodefest2011-Live
Nodefest2011-Live
Jxck Jxck
Real Time App with Node.js
Real Time App with Node.js
Jxck Jxck
Node.js ― Hello, world! の1歩先へ。
Node.js ― Hello, world! の1歩先へ。
Tatsuya Tobioka
Heroku java
Heroku java
Kazuyuki Kawamura
Http2 on go1.6rc2
Http2 on go1.6rc2
Jxck Jxck
Next generation web talk @cross2013
Next generation web talk @cross2013
Jxck Jxck
Webページで学ぶJavaScript2013 第7回
Webページで学ぶJavaScript2013 第7回
京大 マイコンクラブ
公開型CMSとしてのTrac
公開型CMSとしてのTrac
Kazuya Hirobe
websocket-survery
websocket-survery
hogemaru_
PIC RoR Heroku
PIC RoR Heroku
mgwsuzuki
HTTP入門
HTTP入門
Sota Sugiura
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)
stmkza
Web socket and gRPC
Web socket and gRPC
TIS Inc
HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2
Jxck Jxck
Java Script4
Java Script4
Kiminari Homma
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
shigeki_ohtsu
HTTP入門
HTTP入門
Sho A
Httpを振り返ってみる
Httpを振り返ってみる
galluda
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Kensaku Komatsu
モダンでオサレなwebサイト
モダンでオサレなwebサイト
Munenori Sugimura
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
Yu Nobuoka
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
Kensaku Komatsu
ORTC SVC SimulCast
ORTC SVC SimulCast
Jxck Jxck
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会
Jxck Jxck
Extensible web #html5j
Extensible web #html5j
Jxck Jxck
Extensible web
Extensible web
Jxck Jxck
Más contenido relacionado
Similar a Gtug girls meetup web socket handson
Webページで学ぶJavaScript2013 第7回
Webページで学ぶJavaScript2013 第7回
京大 マイコンクラブ
公開型CMSとしてのTrac
公開型CMSとしてのTrac
Kazuya Hirobe
websocket-survery
websocket-survery
hogemaru_
PIC RoR Heroku
PIC RoR Heroku
mgwsuzuki
HTTP入門
HTTP入門
Sota Sugiura
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)
stmkza
Web socket and gRPC
Web socket and gRPC
TIS Inc
HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2
Jxck Jxck
Java Script4
Java Script4
Kiminari Homma
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
shigeki_ohtsu
HTTP入門
HTTP入門
Sho A
Httpを振り返ってみる
Httpを振り返ってみる
galluda
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Kensaku Komatsu
モダンでオサレなwebサイト
モダンでオサレなwebサイト
Munenori Sugimura
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
Yu Nobuoka
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
Kensaku Komatsu
Similar a Gtug girls meetup web socket handson
(17)
Webページで学ぶJavaScript2013 第7回
Webページで学ぶJavaScript2013 第7回
公開型CMSとしてのTrac
公開型CMSとしてのTrac
websocket-survery
websocket-survery
PIC RoR Heroku
PIC RoR Heroku
HTTP入門
HTTP入門
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)
Web socket and gRPC
Web socket and gRPC
HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2
Java Script4
Java Script4
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
Node の HTTP/2.0 モジュール iij-http2 の実装苦労話
HTTP入門
HTTP入門
Httpを振り返ってみる
Httpを振り返ってみる
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
モダンでオサレなwebサイト
モダンでオサレなwebサイト
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
Más de Jxck Jxck
ORTC SVC SimulCast
ORTC SVC SimulCast
Jxck Jxck
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会
Jxck Jxck
Extensible web #html5j
Extensible web #html5j
Jxck Jxck
Extensible web
Extensible web
Jxck Jxck
HTTP2Study chronicle #http2conf
HTTP2Study chronicle #http2conf
Jxck Jxck
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diver
Jxck Jxck
Updates of socket.io@1.0
Updates of socket.io@1.0
Jxck Jxck
Why HTML Form dose not support PUT & DELETE ?
Why HTML Form dose not support PUT & DELETE ?
Jxck Jxck
Next generation web talk @cross2014
Next generation web talk @cross2014
Jxck Jxck
HTTP2 & HPACK #pyfes 2013-11-30
HTTP2 & HPACK #pyfes 2013-11-30
Jxck Jxck
Network server in go #gocon 2013-11-14
Network server in go #gocon 2013-11-14
Jxck Jxck
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
Jxck Jxck
Http2.0 Guide 2013-08-14 #http2study
Http2.0 Guide 2013-08-14 #http2study
Jxck Jxck
Nodejs Introduction
Nodejs Introduction
Jxck Jxck
Más de Jxck Jxck
(15)
ORTC SVC SimulCast
ORTC SVC SimulCast
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会
Extensible web #html5j
Extensible web #html5j
Extensible web
Extensible web
HTTP2Study chronicle #http2conf
HTTP2Study chronicle #http2conf
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diver
Updates of socket.io@1.0
Updates of socket.io@1.0
Why HTML Form dose not support PUT & DELETE ?
Why HTML Form dose not support PUT & DELETE ?
Next generation web talk @cross2014
Next generation web talk @cross2014
HTTP2 & HPACK #pyfes 2013-11-30
HTTP2 & HPACK #pyfes 2013-11-30
Network server in go #gocon 2013-11-14
Network server in go #gocon 2013-11-14
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
Http2.0 Guide 2013-08-14 #http2study
Http2.0 Guide 2013-08-14 #http2study
Nodejs Introduction
Nodejs Introduction
Gtug girls meetup web socket handson
1.
WebSocket リアルタイム Web を切り開く 新しいプロトコル
2.
Jxck ● id: Jxck ●
github: Jxck ● twitter: jxck_ ● blog: http://d.hatena.ne.jp/jxck ● Love: music
3.
4.
なにそれおいしいの? WebSocket?
5.
"みんなで文書を共有しよう" これまでの Web
6.
サーバに上げた文書(HTML)を 示す場所(URL)を教えれば ソフト(Browser)を使ってそれを 取得(HTTP)できるし良い感じ。 "みんなで文書を共有しよう"
7.
HTTP でドキュメントを取得 文書
8.
HTTP でチャット F5 を連打!!?
9.
Pull ベースの Web
10.
Web2.0的なアレでは
11.
もう少し賢く(Long Polling)
12.
文書? Pull? 実際に送りたいデータ。 小さい、しかも双方向で送りたい。 { "message" :
"hello world", "author" : "Jxck" }
13.
もっと効率よくできないか? ● Push するために
Pull しまくってる ○ HTTPがもともとそういうものだからしょうがない ● やり取りするメッセージも小さいのに ○ HTTPはもと(ry ● もっとカジュアルに送受信したい ○ (ry
14.
よろしい、ならば HTML5 だ よんだ?
15.
Push (というか双方向)
16.
WebSocket ● 小さいデータを ● 沢山の人と ●
頻繁に ● 効率よく ● 双方向でやりとりする チャットやゲームに最適
17.
WebSocket を使ってプログラミング をしてもいいんだけど、、 Q: 先生
WebSocket が繋がりません! ● 非対応ブラウザ ● ネットワーク環境 ● ウイルス対策ソフト ● 大人の事情 A: Socket.IO というのがあってだな。
18.
Socket.IO のポジション ブラウザの API
を 生でゴリゴリ ライブラリでサクサク DOM jQuery WebSocket Socket.IO コ コ
19.
Socket.IO どうよ? つながりにくい環境でもいい 感じに通信してくれる。 あるといいな、があるんですよ ね。認証とか。 古いブラウザでも動きまし た!! 色んな言語で使えるのが いい。 みんな使ってたから 作者がイケメン *意見には個人差があります
20.
Handson
21.
22.
Socket.IO を使ってみよう 2, サーバ側 の実装 1,
サーバに接 続するブラウザ 側の実装 http://54.250.126.97:3000/ これを作ります。
23.
環境 Node.js のインストール ● 本家インストーラ ●
nodebrew ハンズオンマテリアル https://github.com/Jxck/socket.io.chat-sample $ node -v v0.10.4 $ npm -v 1.2.18 (多少違ってもok)
24.
Socket.IO.Chat-Sample $ cd socket.io.chat-sample $
cd handson $ npm install 準備完了 (おかしかったらチューターまで)
25.
1. ブラウザ側の実装 AWS で実 装済みの サーバ サーバに接続す るブラウザ側の 実装 1.
サーバと接続 2. メッセージ送信 3. メッセージ受信
26.
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 に追加 }); });
27.
起動方法 $ cd socket.io.chat-sample $
cd handson $ node server.js 実装したらサーバを起動 (おかしかったらチューターまで) http://localhost:3000/ にアクセス
28.
2. サーバ側の実装 node.js でサー バを実装 1.
接続の確認 2. メッセージ受信 3. メッセージ送信 サーバに 接続するブ ラウザ側の 実装
29.
2. サーバ側の実装 // Socket.IO var
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); }); });
30.
起動方法 $ cd socket.io.chat-sample $
cd handson $ node server.js 実装したらサーバを起動 (おかしかったらチューターまで) http://localhost:3000/ にアクセス
31.
まとめ このページを読んでいるということは、今頃君はもうやり遂げたと いうことだろう。おめでとう。 今回は Socket.IO を使ったチャットを作ってもらたわけだが、ど うだっただろうか?
なんか思ったよりも簡単で楽しいと思っていた だけたなら本望だ。 もし余力があれば、今回のチャットを色々改造したり、 Socket. IO を使わない WebSocket のプログラミングにするなど、自分な りのリアルタイム Web に挑戦してみて欲しい。 これからの Web を担う君たちには云々かんぬん。 健闘を祈る。 Jxck
Descargar ahora