SlideShare a Scribd company logo
WebSocketことはじめ
⾃自⼰己

! 
! 
!    ⼤大
! 
! 
!
WebSocketことはじめ
WebSocketことはじめ
!
     !   ⼀一   ⽇日
! 
⽇日   ⽬目

⽇日        ⼈人
⽇日
! 
! 
WebSocketことはじめ
! 
          ⽣生        ⽅方

                         ⽤用

!  ⾼高
               ⽐比
     ! 
     ! 
     ! 
WebSocketことはじめ
⽅方
!              ⽅方


     ! 
⽅方

! 
           ⽅方
! 
     ! 
          ⽅方
⽅方

!         ⽅方
     !
     ! 
! 


! 
     ! 
     ! 
          ! 
! 

! 

! 
     ! 
! 

! 
     !         ⽣生   ⽣生
     !    ⽤用


! 
     !               ⼤大
!
    ! 
    !    ⼀一
    ! 
WebSocketことはじめ
!
!
WebSocketことはじめ
!
     ! 
     !        ⽂文
     ! 
! 
     !   ⽣生
     !             ⾏行行
!         ⼀一

! 
     ! 
     ! 

! 
     !     ⽤用
     ! 
WebSocketことはじめ
!
     !
     ! 
     !
! 
     ! 
! 
     !
! 
     !
! 
! 
          ⾒見見

     ! 

! 

     ! 
WebSocketことはじめ
WebSocketことはじめ
! 
     !  ⽂文   ⼊入⼒力力
     ! 
     ! 
! 
     ! 
     !
! 
     !
          ! 
! 
     !
     !
! 
     !
! 
     !               ⽤用
     ! 

! 
     !         ⽤用
     ! 


! 
     !    ⽤用
     !              ⽤用    ⼈人
! 
     ! 

! 

! 
! 
     !

         !
WebSocketことはじめ
!                          ⽣生
//                !
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();!
WebSocketことはじめ
WebSocketことはじめ
! 
     ! 
     ! 

! 

     ! 
!
    !              ⽅方

    !         ⽅方     ⾃自
         ! 
    ! 
WebSocketことはじめ
!                           ⽣生
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);!
    });

    !
WebSocketことはじめ
WebSocketことはじめ
! 
     ! 
! 
     !

          ! 
! 
     !
          !          ⽇日


     !          ⽤用
               ⾃自
     ! 
⾮非
!                           ⽣生
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ことはじめ
WebSocketことはじめ
!              ⼒力力
! 

     ! 
          ⼀一
!
    !         ⽅方


!


    !    ʼ’
WebSocketことはじめ

More Related Content

What's hot (12)

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
 
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
 
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
 

Viewers also liked (13)

日曜プログラマーが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
 
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
Yuusuke Takeuchi
 
オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門
Ryo Miyake
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
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
 
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
Yuusuke Takeuchi
 
オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門オブジェクト指向プログラミング再入門
オブジェクト指向プログラミング再入門
Ryo Miyake
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
 

Similar to 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
sandy moragón
 
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
ChelseaHolt2
 
47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf
Sanjeevkumar217359
 
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
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...
muzaffertahir9
 
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
DrLendySpires
 
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
Tomas De Graaf
 
S-Series Showcases & Counters
S-Series Showcases & CountersS-Series Showcases & Counters
S-Series Showcases & Counters
FPD Group Ltd
 
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
muzaffertahir9
 
AARTO Policy & Procedure
AARTO Policy & ProcedureAARTO Policy & Procedure
AARTO Policy & Procedure
Maddy Blignaut
 
Tema 7.pdf
Tema 7.pdfTema 7.pdf
Tema 7.pdf
alex923843
 
אורי קוח 2014
אורי קוח 2014אורי קוח 2014
אורי קוח 2014
Ori Tuval
 
Manual propaganda en español
Manual propaganda en españolManual propaganda en español
Manual propaganda en español
Acciones Almerienses
 
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)
 
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
sandy moragón
 
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
ChelseaHolt2
 
47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf
Sanjeevkumar217359
 
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
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...
muzaffertahir9
 
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
DrLendySpires
 
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
Tomas De Graaf
 
S-Series Showcases & Counters
S-Series Showcases & CountersS-Series Showcases & Counters
S-Series Showcases & Counters
FPD Group Ltd
 
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
muzaffertahir9
 
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)
 

More from Kohei Kadowaki (9)

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

WebSocketことはじめ

  • 2. ⾃自⼰己 !  !  !  ⼤大 !  !  !
  • 5. ! ! ⼀一 ⽇日 ! 
  • 6. ⽇日 ⽬目 ⽇日 ⼈人 ⽇日
  • 9. !  ⽣生 ⽅方 ⽤用 !  ⾼高 ⽐比 !  !  ! 
  • 11. ⽅方 !  ⽅方 ! 
  • 12. ⽅方 !  ⽅方 !  !  ⽅方
  • 13. ⽅方 !  ⽅方 ! ! 
  • 14. !  !  !  !  ! 
  • 16. !  !  !  ⽣生 ⽣生 !  ⽤用 !  !  ⼤大
  • 17. ! !  !  ⼀一 ! 
  • 19. !
  • 20. !
  • 22. ! !  !  ⽂文 !  !  !   ⽣生 !  ⾏行行
  • 23. !  ⼀一 !  !  !  !  !  ⽤用 ! 
  • 25. ! ! !  ! !  !  !  ! !  ! ! 
  • 26. !  ⾒見見 !  !  ! 
  • 29. !  !  ⽂文 ⼊入⼒力力 !  ! 
  • 30. !  !  ! !  ! ! 
  • 31. !  ! ! !  !
  • 32. !  !  ⽤用 !  !  ! ⽤用 !  !  !  ⽤用 ! ⽤用 ⼈人
  • 33. !  !  !  ! 
  • 34. !  ! !
  • 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();!
  • 40. !  !  !  !  ! 
  • 41. ! !  ⽅方 !  ⽅方 ⾃自 !  ! 
  • 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);! });
 !
  • 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) {! !//! });!
  • 54. !  ⼒力力 !  !  ⼀一
  • 55. ! !  ⽅方 ! !  ʼ’