SlideShare a Scribd company logo
1 of 56
Download to read offline
⾃自⼰己

! 
! 
!    ⼤大
! 
! 
!
!
     !   ⼀一   ⽇日
! 
⽇日   ⽬目

⽇日        ⼈人
⽇日
! 
! 
! 
          ⽣生        ⽅方

                         ⽤用

!  ⾼高
               ⽐比
     ! 
     ! 
     ! 
⽅方
!              ⽅方


     ! 
⽅方

! 
           ⽅方
! 
     ! 
          ⽅方
⽅方

!         ⽅方
     !
     ! 
! 


! 
     ! 
     ! 
          ! 
! 

! 

! 
     ! 
! 

! 
     !         ⽣生   ⽣生
     !    ⽤用


! 
     !               ⼤大
!
    ! 
    !    ⼀一
    ! 
!
!
!
     ! 
     !        ⽂文
     ! 
! 
     !   ⽣生
     !             ⾏行行
!         ⼀一

! 
     ! 
     ! 

! 
     !     ⽤用
     ! 
!
     !
     ! 
     !
! 
     ! 
! 
     !
! 
     !
! 
! 
          ⾒見見

     ! 

! 

     ! 
! 
     !  ⽂文   ⼊入⼒力力
     ! 
     ! 
! 
     ! 
     !
! 
     !
          ! 
! 
     !
     !
! 
     !
! 
     !               ⽤用
     ! 

! 
     !         ⽤用
     ! 


! 
     !    ⽤用
     !              ⽤用    ⼈人
! 
     ! 

! 

! 
! 
     !

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

More Related Content

What's hot

Know more about hair loss treatments
Know more about hair loss treatmentsKnow more about hair loss treatments
Know more about hair loss treatmentsSonia 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 ILRIAbsolomon Kihara
 
Phone gap Stats & Growth
Phone gap Stats & GrowthPhone gap Stats & Growth
Phone gap Stats & GrowthAndreCharland
 
Kawasan lindung final
Kawasan lindung finalKawasan lindung final
Kawasan lindung finalJhon Blora
 
对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读对项羽乌江自刎的一种解读
对项羽乌江自刎的一种解读sugeladi
 
G325 section a january 2011 i
G325 section a january 2011 iG325 section a january 2011 i
G325 section a january 2011 ileannacatherina
 
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 londonSonia 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 1985muzaffertahir9
 

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

Viewers also liked

日曜プログラマーが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
 

Viewers also liked (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をつかってみた
 

Similar to WebSocketことはじめ

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 caixassandy 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 PlantChelseaHolt2
 
47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdf47659143-cell-phone-jammer.pdf
47659143-cell-phone-jammer.pdfSanjeevkumar217359
 
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üsTess 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 enDr Lendy Spires
 
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 2014Tomas De Graaf
 
S-Series Showcases & Counters
S-Series Showcases & CountersS-Series Showcases & Counters
S-Series Showcases & CountersFPD 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 1985muzaffertahir9
 
AARTO Policy & Procedure
AARTO Policy & ProcedureAARTO Policy & Procedure
AARTO Policy & ProcedureMaddy Blignaut
 
אורי קוח 2014
אורי קוח 2014אורי קוח 2014
אורי קוח 2014Ori Tuval
 
P-Custom Rubber Presentation
P-Custom Rubber PresentationP-Custom Rubber Presentation
P-Custom Rubber PresentationBill 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 larkinUN Migration Agency (IOM)
 

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

More from 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でつくるはじめてのPONGKohei 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
 

More from 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. ! !  ⽅方 ! !  ʼ’