SlideShare une entreprise Scribd logo

WebSocketことはじめ

•
•
Kohei Kadowaki
Kohei Kadowaki

2011.7.30に大阪で行われた、第一回「HTML5など勉強会」での発表資料です。

Technologie
1  sur  56
Télécharger pour lire hors ligne
⾃自⼰己 !  !  !  ⼤大 !  !  !
! ! ⼀一 ⽇日 ! 
⽇日 ⽬目 ⽇日 ⼈人 ⽇日
!  ! 
!  ⽣生 ⽅方 ⽤用 !  ⾼高 ⽐比 !  !  ! 
⽅方 !  ⽅方 ! 
⽅方 !  ⽅方 !  !  ⽅方
⽅方 !  ⽅方 ! ! 
!  !  !  !  ! 
!  !  !  ! 
!  !  !  ⽣生 ⽣生 !  ⽤用 !  !  ⼤大
! !  !  ⼀一 ! 
!
!
! !  !  ⽂文 !  !  !   ⽣生 !  ⾏行行
!  ⼀一 !  !  !  !  !  ⽤用 ! 
! ! !  ! !  !  !  ! !  ! ! 
!  ⾒見見 !  !  ! 
!  !  ⽂文 ⼊入⼒力力 !  ! 
!  !  ! !  ! ! 
!  ! ! !  !
!  !  ⽤用 !  !  ! ⽤用 !  !  !  ⽤用 ! ⽤用 ⼈人
!  !  !  ! 
!  ! !
!  ⽣生 // ! var ws = require(“websocket-server”); ! ! var server = ws.createServer();! server.listen(80); // 80 ! !  server.addListener("connection", function(connection){ ! !connection.addListener("message", function(msg){ ! ! !// ! !! ! !server.broadcast(msg);! !}); ! });!
! ⽣生 var ws = new WebSocket(“ws://example.com/chat/”);! !  ws.onopen = function() {};! ws.onclose = function() {};! ws.onmessage = function() {};! ws.onerror = function() {};! !  ws.send(message);! ws.close();!
!  !  !  !  ! 
! !  ⽅方 !  ⽅方 ⾃自 !  ! 
!  ⽣生 var io = require(‘socket.io’).listen(80)! ! ! !  io.sockets.on('connection', function (socket) {
 !socket.on(‘message’, function(message) {! ! !// ! ! !io.sockets.send(message);! !});
 });! !
!  <script src="/socket.io/socket.io.js"></script>! ! ! ⽣生 var socket = io.connect(‘ws://example.com’);! !  socket.on(’message', function (data) {! !// ...
 !socket.send(message);! });
 !
!  !  !  ! ! 
!  ! !  ⽇日 ! ⽤用 ⾃自 ! 
⾮非
!  ⽣生 var Pusher = require('pusher');! var pusher = new Pusher({! !appId: ‘YOUR_APP_ID’, // Pusher ! !appKey: 'YOUR_APP_KEY',! !secret: 'YOUR_APP_SECRET'! });! var channel = pusher.channel(‘chat’); // ! ! !  channel.trigger('message', data);! ! ⽤用
!  <script src=“http://js.pusherapp.com/1.8/ pusher.min.js"></script>! ! !  ⽣生 var pusher = new Pusher(YOUR_APP_KEY);! var channel = pusher.subscribe('chat');! !  channel.bind('message', function(data) {! !//! });!
!  ⼒力力 !  !  ⼀一
! !  ⽅方 ! !  ʼ’
WebSocketことはじめ

Recommandé

Os adjetivos - Teoria
Os adjetivos - TeoriaOs adjetivos - Teoria
Os adjetivos - Teoria
Ana Tapadinhas
 
Peta kawasan resapan air
Peta kawasan resapan airPeta kawasan resapan air
Peta kawasan resapan air
Jhon Blora
 
50916599 presentacion-rieb-en-power-rbr
50916599 presentacion-rieb-en-power-rbr50916599 presentacion-rieb-en-power-rbr
50916599 presentacion-rieb-en-power-rbr
Judith Ferrer López
 
Brazil localization jan-klass_heinsohn
Brazil localization jan-klass_heinsohnBrazil localization jan-klass_heinsohn
Brazil localization jan-klass_heinsohn
Muhammad Faisal (1200+ Members)
 
Logiciels libres et marchés publics
Logiciels libres et marchés publicsLogiciels libres et marchés publics
Logiciels libres et marchés publics
cogitis
 
Anbefaling - Lotte (Mediefag)
Anbefaling - Lotte (Mediefag)Anbefaling - Lotte (Mediefag)
Anbefaling - Lotte (Mediefag)
Signe Scharf
 
Appel rased janvier_2011
Appel rased janvier_2011Appel rased janvier_2011
Appel rased janvier_2011
Franck Dupont
 
#MustRead #Flipkart #ApologyEmail
#MustRead #Flipkart #ApologyEmail#MustRead #Flipkart #ApologyEmail
#MustRead #Flipkart #ApologyEmail
Rajesh Soundararajan
 

Recommandé

Os adjetivos - Teoria
Os adjetivos - TeoriaOs adjetivos - Teoria
Os adjetivos - Teoria
Ana Tapadinhas
 
Peta kawasan resapan air
Peta kawasan resapan airPeta kawasan resapan air
Peta kawasan resapan air
Jhon Blora
 
50916599 presentacion-rieb-en-power-rbr
50916599 presentacion-rieb-en-power-rbr50916599 presentacion-rieb-en-power-rbr
50916599 presentacion-rieb-en-power-rbr
Judith Ferrer López
 
Brazil localization jan-klass_heinsohn
Brazil localization jan-klass_heinsohnBrazil localization jan-klass_heinsohn
Brazil localization jan-klass_heinsohn
Muhammad Faisal (1200+ Members)
 
Logiciels libres et marchés publics
Logiciels libres et marchés publicsLogiciels libres et marchés publics
Logiciels libres et marchés publics
cogitis
 
Anbefaling - Lotte (Mediefag)
Anbefaling - Lotte (Mediefag)Anbefaling - Lotte (Mediefag)
Anbefaling - Lotte (Mediefag)
Signe Scharf
 
Appel rased janvier_2011
Appel rased janvier_2011Appel rased janvier_2011
Appel rased janvier_2011
Franck Dupont
 
#MustRead #Flipkart #ApologyEmail
#MustRead #Flipkart #ApologyEmail#MustRead #Flipkart #ApologyEmail
#MustRead #Flipkart #ApologyEmail
Rajesh Soundararajan
 
Know more about hair loss treatments
Know more about hair loss treatmentsKnow more about hair loss treatments
Know more about hair loss treatments
Sonia Singh
 
The state of the art biorepository at ILRI
The state of the art biorepository at ILRIThe state of the art biorepository at ILRI
The state of the art biorepository at ILRI
Absolomon Kihara
 
Phone gap Stats & Growth
Phone gap Stats & GrowthPhone gap Stats & Growth
Phone gap Stats & Growth
AndreCharland
 
Kawasan lindung final
Kawasan lindung finalKawasan lindung final
Kawasan lindung final
Jhon Blora
 
对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读
sugeladi
 
G325 section a january 2011 i
G325 section a january 2011 iG325 section a january 2011 i
G325 section a january 2011 i
leannacatherina
 
Understanding the working of refrigerator repairs in london
Understanding the working of refrigerator repairs in londonUnderstanding the working of refrigerator repairs in london
Understanding the working of refrigerator repairs in london
Sonia Singh
 
Team foundation server の歩き方
Team foundation server の歩き方Team foundation server の歩き方
Team foundation server の歩き方
Kaoru NAKAMURA
 
L11 grammar 1
L11 grammar 1L11 grammar 1
L11 grammar 1
Accura Kurosawa
 
人生的路
人生的路人生的路
人生的路
Shirley Chan
 
Familia del magueyal
Familia del magueyalFamilia del magueyal
Familia del magueyal
Hector Dominguez
 
Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985
Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985
Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985
muzaffertahir9
 
AndroidでWebSocket
AndroidでWebSocketAndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
 
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
Yuusuke Takeuchi
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Yuusuke Takeuchi
 
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリPebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
 
Webでもできるデータビジュアライゼーション
WebでもできるデータビジュアライゼーションWebでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
 
Glassfish勉強会（JavaEE6について）
Glassfish勉強会（JavaEE6について）Glassfish勉強会（JavaEE6について）
Glassfish勉強会（JavaEE6について）
Ryo Asai
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
 
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
 
いまさら聞けない！？Backbone.js 超入門
いまさら聞けない！？Backbone.js 超入門いまさら聞けない！？Backbone.js 超入門
いまさら聞けない！？Backbone.js 超入門
Kohei Kadowaki
 

Contenu connexe

Tendances

对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读
sugeladi
 
G325 section a january 2011 i
G325 section a january 2011 iG325 section a january 2011 i
G325 section a january 2011 i
leannacatherina
 
Team foundation server の歩き方
Team foundation server の歩き方Team foundation server の歩き方
Team foundation server の歩き方
Kaoru NAKAMURA
 

Tendances (12)

Know more about hair loss treatments
Know more about hair loss treatmentsKnow more about hair loss treatments
Know more about hair loss treatments
 
The state of the art biorepository at ILRI
The state of the art biorepository at ILRIThe state of the art biorepository at ILRI
The state of the art biorepository at ILRI
 
Phone gap Stats & Growth
Phone gap Stats & GrowthPhone gap Stats & Growth
Phone gap Stats & Growth
 
Kawasan lindung final
Kawasan lindung finalKawasan lindung final
Kawasan lindung final
 
对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读
 
G325 section a january 2011 i
G325 section a january 2011 iG325 section a january 2011 i
G325 section a january 2011 i
 
Understanding the working of refrigerator repairs in london
Understanding the working of refrigerator repairs in londonUnderstanding the working of refrigerator repairs in london
Understanding the working of refrigerator repairs in london
 
Team foundation server の歩き方
Team foundation server の歩き方Team foundation server の歩き方
Team foundation server の歩き方
 
L11 grammar 1
L11 grammar 1L11 grammar 1
L11 grammar 1
 
人生的路
人生的路人生的路
人生的路
 
Familia del magueyal
Familia del magueyalFamilia del magueyal
Familia del magueyal
 
Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985
Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985
Friday Sermon Delivered by Hazrat Mirza Athir Ahmed (RA) 14 June 1985
 

En vedette

日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
Yuusuke Takeuchi
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Yuusuke Takeuchi
 
Glassfish勉強会（JavaEE6について）
Glassfish勉強会（JavaEE6について）Glassfish勉強会（JavaEE6について）
Glassfish勉強会（JavaEE6について）
Ryo Asai
 
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
Yuusuke Takeuchi
 
オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門
Ryo Miyake
 

En vedette (13)

AndroidでWebSocket
AndroidでWebSocketAndroidでWebSocket
AndroidでWebSocket
 
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
 
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリPebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
 
Webでもできるデータビジュアライゼーション
WebでもできるデータビジュアライゼーションWebでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
 
Glassfish勉強会（JavaEE6について）
Glassfish勉強会（JavaEE6について）Glassfish勉強会（JavaEE6について）
Glassfish勉強会（JavaEE6について）
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
 
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
いまさら聞けない！？Backbone.js 超入門
いまさら聞けない！？Backbone.js 超入門いまさら聞けない！？Backbone.js 超入門
いまさら聞けない！？Backbone.js 超入門
 
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
 
オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
 

Similaire à WebSocketことはじめ

05 eu-indicators-comprehensive-approach-eu-implementat en
05 eu-indicators-comprehensive-approach-eu-implementat en05 eu-indicators-comprehensive-approach-eu-implementat en
05 eu-indicators-comprehensive-approach-eu-implementat en
Dr Lendy Spires
 
AARTO Policy & Procedure
AARTO Policy & ProcedureAARTO Policy & Procedure
AARTO Policy & Procedure
Maddy Blignaut
 
אורי קוח 2014
אורי קוח 2014אורי קוח 2014
אורי קוח 2014
Ori Tuval
 
P-Custom Rubber Presentation
P-Custom Rubber PresentationP-Custom Rubber Presentation
P-Custom Rubber Presentation
Bill Munday
 
Why is CSR important? A commercial perspective on CSR Clc larkin
Why is CSR important? A commercial perspective on CSR Clc larkinWhy is CSR important? A commercial perspective on CSR Clc larkin
Why is CSR important? A commercial perspective on CSR Clc larkin
UN Migration Agency (IOM)
 

Similaire à WebSocketことはじめ (20)

Plan de comunicación fusión caixas
Plan de comunicación fusión caixasPlan de comunicación fusión caixas
Plan de comunicación fusión caixas
 
Phonegapstats
PhonegapstatsPhonegapstats
Phonegapstats
 
RUGR_114_Storyboard_101323- The Pest Plant
RUGR_114_Storyboard_101323- The Pest PlantRUGR_114_Storyboard_101323- The Pest Plant
RUGR_114_Storyboard_101323- The Pest Plant
 
What Lies Ahead? Emerging Licensing Models For Commercial Content Oosterbaan
What Lies Ahead? Emerging Licensing Models For Commercial Content OosterbaanWhat Lies Ahead? Emerging Licensing Models For Commercial Content Oosterbaan
What Lies Ahead? Emerging Licensing Models For Commercial Content Oosterbaan
 
47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf
 
Dostoievski o jogador
Dostoievski o jogadorDostoievski o jogador
Dostoievski o jogador
 
Short portfolio presentation by Tess Krüs
Short portfolio presentation by Tess KrüsShort portfolio presentation by Tess Krüs
Short portfolio presentation by Tess Krüs
 
Friday Sermon Dilivered by Hazrat Mirza Tahir Ahmed Khalif tul Masih te 4th 3...
Friday Sermon Dilivered by Hazrat Mirza Tahir Ahmed Khalif tul Masih te 4th 3...Friday Sermon Dilivered by Hazrat Mirza Tahir Ahmed Khalif tul Masih te 4th 3...
Friday Sermon Dilivered by Hazrat Mirza Tahir Ahmed Khalif tul Masih te 4th 3...
 
05 eu-indicators-comprehensive-approach-eu-implementat en
05 eu-indicators-comprehensive-approach-eu-implementat en05 eu-indicators-comprehensive-approach-eu-implementat en
05 eu-indicators-comprehensive-approach-eu-implementat en
 
Tut6117
Tut6117Tut6117
Tut6117
 
Het nieuwe solliciteren via Twitter - versie november 2014
Het nieuwe solliciteren via Twitter - versie november 2014Het nieuwe solliciteren via Twitter - versie november 2014
Het nieuwe solliciteren via Twitter - versie november 2014
 
Route 333 SE Flyer
Route 333 SE FlyerRoute 333 SE Flyer
Route 333 SE Flyer
 
S-Series Showcases & Counters
S-Series Showcases & CountersS-Series Showcases & Counters
S-Series Showcases & Counters
 
Friday Sermon Dilivered by hazrat Khalifa ul Masih the 4Th (RA) 29 March 1985
Friday Sermon Dilivered by hazrat Khalifa ul Masih the 4Th (RA) 29 March 1985Friday Sermon Dilivered by hazrat Khalifa ul Masih the 4Th (RA) 29 March 1985
Friday Sermon Dilivered by hazrat Khalifa ul Masih the 4Th (RA) 29 March 1985
 
AARTO Policy & Procedure
AARTO Policy & ProcedureAARTO Policy & Procedure
AARTO Policy & Procedure
 
Tema 7.pdf
Tema 7.pdfTema 7.pdf
Tema 7.pdf
 
אורי קוח 2014
אורי קוח 2014אורי קוח 2014
אורי קוח 2014
 
Manual propaganda en español
Manual propaganda en españolManual propaganda en español
Manual propaganda en español
 
P-Custom Rubber Presentation
P-Custom Rubber PresentationP-Custom Rubber Presentation
P-Custom Rubber Presentation
 
Why is CSR important? A commercial perspective on CSR Clc larkin
Why is CSR important? A commercial perspective on CSR Clc larkinWhy is CSR important? A commercial perspective on CSR Clc larkin
Why is CSR important? A commercial perspective on CSR Clc larkin
 

Plus de Kohei Kadowaki

d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
 

Plus de Kohei Kadowaki (9)

プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事
 
5分でわかる？Backbone.js ことはじめ
5分でわかる？Backbone.js ことはじめ5分でわかる？Backbone.js ことはじめ
5分でわかる？Backbone.js ことはじめ
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
 

WebSocketことはじめ

  • 1.
  • 2. ⾃自⼰己 !  !  !  ⼤大 !  !  !
  • 3.
  • 4.
  • 5. ! ! ⼀一 ⽇日 ! 
  • 6. ⽇日 ⽬目 ⽇日 ⼈人 ⽇日
  • 8.
  • 9. !  ⽣生 ⽅方 ⽤用 !  ⾼高 ⽐比 !  !  ! 
  • 10.
  • 11. ⽅方 !  ⽅方 ! 
  • 12. ⽅方 !  ⽅方 !  !  ⽅方
  • 13. ⽅方 !  ⽅方 ! ! 
  • 14. !  !  !  !  ! 
  • 16. !  !  !  ⽣生 ⽣生 !  ⽤用 !  !  ⼤大
  • 17. ! !  !  ⼀一 ! 
  • 18.
  • 19. !
  • 20. !
  • 21.
  • 22. ! !  !  ⽂文 !  !  !   ⽣生 !  ⾏行行
  • 23. !  ⼀一 !  !  !  !  !  ⽤用 ! 
  • 24.
  • 25. ! ! !  ! !  !  !  ! !  ! ! 
  • 26. !  ⾒見見 !  !  ! 
  • 27.
  • 28.
  • 29. !  !  ⽂文 ⼊入⼒力力 !  ! 
  • 30. !  !  ! !  ! ! 
  • 31. !  ! ! !  !
  • 32. !  !  ⽤用 !  !  ! ⽤用 !  !  !  ⽤用 ! ⽤用 ⼈人
  • 33. !  !  !  ! 
  • 34. !  ! !
  • 35.
  • 36. !  ⽣生 // ! var ws = require(“websocket-server”); ! ! var server = ws.createServer();! server.listen(80); // 80 ! !  server.addListener("connection", function(connection){ ! !connection.addListener("message", function(msg){ ! ! !// ! !! ! !server.broadcast(msg);! !}); ! });!
  • 37. ! ⽣生 var ws = new WebSocket(“ws://example.com/chat/”);! !  ws.onopen = function() {};! ws.onclose = function() {};! ws.onmessage = function() {};! ws.onerror = function() {};! !  ws.send(message);! ws.close();!
  • 38.
  • 39.
  • 40. !  !  !  !  ! 
  • 41. ! !  ⽅方 !  ⽅方 ⾃自 !  ! 
  • 42.
  • 43. !  ⽣生 var io = require(‘socket.io’).listen(80)! ! ! !  io.sockets.on('connection', function (socket) {
 !socket.on(‘message’, function(message) {! ! !// ! ! !io.sockets.send(message);! !});
 });! !
  • 44. !  <script src="/socket.io/socket.io.js"></script>! ! ! ⽣生 var socket = io.connect(‘ws://example.com’);! !  socket.on(’message', function (data) {! !// ...
 !socket.send(message);! });
 !
  • 45.
  • 46.
  • 47. !  !  !  ! ! 
  • 48. !  ! !  ⽇日 ! ⽤用 ⾃自 ! 
  • 50. !  ⽣生 var Pusher = require('pusher');! var pusher = new Pusher({! !appId: ‘YOUR_APP_ID’, // Pusher ! !appKey: 'YOUR_APP_KEY',! !secret: 'YOUR_APP_SECRET'! });! var channel = pusher.channel(‘chat’); // ! ! !  channel.trigger('message', data);! ! ⽤用
  • 51. !  <script src=“http://js.pusherapp.com/1.8/ pusher.min.js"></script>! ! !  ⽣生 var pusher = new Pusher(YOUR_APP_KEY);! var channel = pusher.subscribe('chat');! !  channel.bind('message', function(data) {! !//! });!
  • 52.
  • 53.
  • 54. !  ⼒力力 !  !  ⼀一
  • 55. ! !  ⽅方 ! !  ʼ’