WebSocket

      July 2011




          1
http://j.mp/ws201107


         2
MiCHiLU Labs.
ENDOH takanao




                3
4
WebSocket




        5
WebSocket


       6
HTML5


•                •
•   CSS3         •
•                •
•   3D
                 •

             7
WebSocket



•
•
        8
WebSocket

shirasu.ws
 WebSocket


     9
shirasu.ws
• https://github.com/michilu/shirasu
• Misultin
                 HTTP

• Erlang

                     10
shirasu.ws
•   Fedora Linux       RPM

             Red Hat Enterprise Linux

•
    YAML

•


                           11
shirasu.ws
•   path

           path

•   HTTP

                  HTTP

•   HTTP GET

           HTTP           WebSocket

                     12
13
• Fedora 14 Amazon EC2
• Shirasu WebSocket


                 14
Amazon EC2

• AWS
• AWS
• Fedora 14
•                  ssh


              15
AWS

• AWS
 http://j.mp/r3KAwO

         16
AWS
•   EC2   US East   EC2 Dashboard   Launch Instance




                         17
AWS
• Request Instances Wizard   My AMIs




                     18
AWS
• “ami-669f680f”        Select




                   19
AWS
• INSTANCE DETAILS    Continue




                 20
AWS
• INSTANCE DETAILS    Continue




                 21
AWS
• INSTANCE DETAILS    Continue




                 22
AWS
•   Key Pair        Key Pair




               23
AWS
•   pem




                24
AWS
•   CONFIGURE FIREWALL   Continue




                    25
AWS
•   REVIEW   Continue




                        26
AWS
•   Close




             27
AWS
•   EC2   Instances




                      28
AWS
•   Public DNS




                 29
AWS
•   Security Groups default        TCP Port/8000




                              30
•




    31
• pem
$ chmod 600 ~/Downloads/shirasu.pem




                 32
• AWS                 ssh
$ ssh -i ~/Downloads/shirasu.pem 
  ec2-user@ec2-****.compute-1.amazonaws.com
…
Are you sure you want to continue connecting
(yes/no)? yes




                     33
• AWS                 ssh
…
Appliance:     fedora-14 appliance 1.0
Hostname:      ip-10-203-13-209
IP Address:    10.203.13.209

[ec2-user@ip-10-203-13-209 ~]$



                     34
Amazon EC2


• shirasu   RPM

•
• shirasu

                  35
• shirasu   RPM
EC2$ curl -O -L http://j.mp/nv9UYI




                     36
• rpm
EC2$ rpm --test -ivh shirasu-0.1.2-1.fc14.i386.rpm

error: Failed dependencies:
        PyYAML is needed by shirasu-0.1.2-1.fc14.i386
        erlang-misultin is needed by shirasu-0.1.2-1.fc14.i386
        erlang-mochiweb is needed by shirasu-0.1.2-1.fc14.i386
        erlang-sasl is needed by shirasu-0.1.2-1.fc14.i386




                               37
• yum
EC2$ sudo yum install -y 
     PyYAML erlang-misultin 
     erlang-mochiweb erlang-sasl
…
Complete!


                38
• rpm                 shirasu
EC2$ sudo rpm -ivh shirasu-0.1.2-1.fc14.i386.rpm

Preparing... ########################################### [100%]
   1:shirasu ########################################### [100%]




                               39
Amazon EC2

• shirasu
• WebSocket
• shirasu
• shirasu
              40
• shirasu
EC2$ sudo service shirasu start

Starting Shirasu:       [   OK    ]




                41
WebSocket
http://ec2-*.compute-1.amazonaws.com:8000/index.html




                          42
1. Chat
• Connect




               43
1. Chat
•             Send




       44
2. Exchange Chart
•   vs




            45
3. Twitter Streaming
    •     shirasu
EC2$ sudo vi /etc/shirasu/shirasu.yaml




                     46
3. Twitter Streaming
     •   <SCREEN_NAME> <PASSWORD>

...
shirasu_http_stream:
  /stream.twitter.com/1/statuses/sample.json:
"http://
<SCREEN_NAME>:<PASSWORD>@stream.twitter.com/1/
statuses/sample.json"
  /exchange/USDJPY:
  - "http://chartapi.finance.yahoo.com/instrument/
1.0/USDJPY=X/chartdata;type=quote;range=2d/csv/"

                        47
3. Twitter Streaming
   • shirasu
EC2$ sudo service shirasu reload

Reloading Shirasu:      [   OK   ]




                48
3. Twitter Streaming
• Twitter Streaming API   WebSocket




                    49
• shirasu
EC2$ sudo service shirasu stop

Stopping Shirasu:       [   OK   ]




                50
51
1. Chat




52
1. Chat
• shirasu
• path
  ws://host:8000/chat
• “/chat” path
•        path

                  53
1. Chat
Server        Clients

               client 1
/path

               client 2

 /foo          client 3



         54
2. Exchange Chart




     55
2. Exchange Chart
• HTTP GET
• HTTP                    CSV
  WebSocket

• http://chartapi.finance.yahoo.com/
  chartapi.finance.yahoo.cominstrument/1.0/
  USDJPY=X/
  chartdata;type=quote;range=2d/csv/

                     56
2. Exchange Chart
        Server         Clients
 HTTP GET
CSV
                        client 1
      /exchange
                        client 2




                  57
3. Twitter Streaming




      58
3. Twitter Streaming
• HTTP GET
• HTTP                   HTTP
  WebSocket

• http://
  <SCREEN_NAME>:<PASSWORD>@
  stream.twitter.com/1/statuses/sample.json

                    59
3. Twitter Streaming
        Server            Clients
Twitter Streaming
       API
     / HTTP
                           client 1
         /twitter
                           client 2




                     60
HTTP GET
   • shirasu_http_stream
/etc/shirasu/shirasu.yaml
…
shirasu_http_stream:
  <path1>: <URL1>
  <path2>:
  - <URL1>
  - <URL2>
                     61
• shirasu_http_serve
/etc/shirasu/shirasu.yaml
…
shirasu_http_serve:
  <path>: <directory path>




                     62
shirasu
   • shirasu listen port
/etc/shirasu/shirasu.yaml
…
shirasu:
  listen:
    port: 8000


                       63
Amazon EC2


• AWS
•


            64
AWS

• AWS
 http://j.mp/r3KAwO

         65
AWS
•   EC2   Instance        Instance Action   Terminate




                     66
WebSocket



        67
WebSocket

1. Google Chrome


2.

3.



                   68
WebSocket
1. Network

2. WebSocket




               69
WebSocket




        70
• WebSocket        EC2

•
• shirasu
• shirasu
              71
WebSocket.JP
http://websocket.jp

 WebSocket




                      72
http://j.mp/o5jxmI

        73

WebSocketサーバを使ってみよう! Jul 2011

Editor's Notes

  • #2 \n
  • #3 \n
  • #4 \n
  • #5 \n
  • #6 \n
  • #7 \n
  • #8 HTML5&amp;#x3067;&amp;#x306F;&amp;#x3001;&amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x306E;&amp;#x6A5F;&amp;#x80FD;&amp;#x3092;&amp;#x8868;&amp;#x73FE;&amp;#x3059;&amp;#x308B;&amp;#x305F;&amp;#x3081;&amp;#x306E;&amp;#x30D0;&amp;#x30C3;&amp;#x30B8;&amp;#x304C;&amp;#x914D;&amp;#x5E03;&amp;#x3055;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x307E;&amp;#x3059;&amp;#x3002;&amp;#x63A5;&amp;#x7D9A;&amp;#x6027;&amp;#x3001;CSS3&amp;#x3001;&amp;#x30C7;&amp;#x30D0;&amp;#x30A4;&amp;#x30B9;&amp;#x30A2;&amp;#x30AF;&amp;#x30BB;&amp;#x30B9;&amp;#x3001;3D&amp;#x30B0;&amp;#x30E9;&amp;#x30D5;&amp;#x30A3;&amp;#x30C3;&amp;#x30AF;&amp;#x30B9;&amp;#x3001;&amp;#x30A8;&amp;#x30D5;&amp;#x30A7;&amp;#x30AF;&amp;#x30C8;&amp;#x3001;&amp;#x30DE;&amp;#x30EB;&amp;#x30C1;&amp;#x30E1;&amp;#x30C7;&amp;#x30A3;&amp;#x30A2;&amp;#x3001;&amp;#x30D1;&amp;#x30D5;&amp;#x30A9;&amp;#x30FC;&amp;#x30DE;&amp;#x30F3;&amp;#x30B9;&amp;#x3001;&amp;#x7D71;&amp;#x5408;&amp;#x3001;&amp;#x610F;&amp;#x5473;&amp;#x8AD6;&amp;#x3001;&amp;#x30AA;&amp;#x30D5;&amp;#x30E9;&amp;#x30A4;&amp;#x30F3;&amp;#x3001;&amp;#x30B9;&amp;#x30C8;&amp;#x30EC;&amp;#x30FC;&amp;#x30B8;&amp;#x3002;WebSocket&amp;#x3092;&amp;#x3053;&amp;#x308C;&amp;#x3089;&amp;#x306B;&amp;#x306A;&amp;#x305E;&amp;#x3089;&amp;#x3048;&amp;#x308B;&amp;#x3068;&amp;#x3001;&amp;#x6B21;&amp;#x306E;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x306A;&amp;#x308A;&amp;#x307E;&amp;#x3059;&amp;#x3002;\n
  • #9 &amp;#x63A5;&amp;#x7D9A;&amp;#x6027;&amp;#x306E;&amp;#x63D0;&amp;#x4F9B;&amp;#x3001;&amp;#x30D1;&amp;#x30D5;&amp;#x30A9;&amp;#x30FC;&amp;#x30DE;&amp;#x30F3;&amp;#x30B9;&amp;#x3001;&amp;#x7D71;&amp;#x5408;&amp;#x306B;&amp;#x5BC4;&amp;#x4E0E;&amp;#x3059;&amp;#x308B;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3048;&amp;#x307E;&amp;#x3059;&amp;#x3002;\n
  • #10 \n
  • #11 \n
  • #12 \n
  • #13 \n
  • #14 &amp;#x3067;&amp;#x306F;&amp;#x3001;&amp;#x3053;&amp;#x308C;&amp;#x3089;&amp;#x306E;&amp;#x6A5F;&amp;#x80FD;&amp;#x306B;&amp;#x5B9F;&amp;#x969B;&amp;#x306B;&amp;#x89E6;&amp;#x308C;&amp;#x3066;&amp;#x307F;&amp;#x307E;&amp;#x3057;&amp;#x3087;&amp;#x3046;\n
  • #15 \n
  • #16 \n
  • #17 \n
  • #18 \n
  • #19 \n
  • #20 \n
  • #21 \n
  • #22 \n
  • #23 \n
  • #24 \n
  • #25 \n
  • #26 \n
  • #27 \n
  • #28 \n
  • #29 \n
  • #30 \n
  • #31 \n
  • #32 \n
  • #33 \n
  • #34 \n
  • #35 \n
  • #36 \n
  • #37 \n
  • #38 \n
  • #39 \n
  • #40 \n
  • #41 \n
  • #42 \n
  • #43 \n
  • #44 \n
  • #45 \n
  • #46 \n
  • #47 \n
  • #48 \n
  • #49 \n
  • #50 \n
  • #51 \n
  • #52 &amp;#x3067;&amp;#x306F;&amp;#x3001;&amp;#x30C7;&amp;#x30E2;&amp;#x3067;&amp;#x4F7F;&amp;#x3063;&amp;#x305F;&amp;#x6A5F;&amp;#x80FD;&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x89E3;&amp;#x8AAC;&amp;#x3057;&amp;#x3066;&amp;#x3044;&amp;#x304D;&amp;#x307E;&amp;#x3059;\n
  • #53 \n
  • #54 \n
  • #55 \n
  • #56 \n
  • #57 \n
  • #58 \n
  • #59 \n
  • #60 \n
  • #61 \n
  • #62 \n
  • #63 \n
  • #64 \n
  • #65 \n
  • #66 \n
  • #67 \n
  • #68 WebSocket&amp;#x306F;&amp;#x76EE;&amp;#x7ACB;&amp;#x305F;&amp;#x306A;&amp;#x3044;&amp;#x5B58;&amp;#x5728;&amp;#x3067;&amp;#x3059;&amp;#x3002;&amp;#x88CF;&amp;#x65B9;&amp;#x3057;&amp;#x3054;&amp;#x3068;&amp;#x3068;&amp;#x3044;&amp;#x3063;&amp;#x305F;&amp;#x3068;&amp;#x3053;&amp;#x308D;&amp;#x3067;&amp;#x3057;&amp;#x3087;&amp;#x3046;&amp;#x304B;&amp;#x3002;&amp;#x3054;&amp;#x5B58;&amp;#x77E5;&amp;#x306E;&amp;#x65B9;&amp;#x3082;&amp;#x3044;&amp;#x3089;&amp;#x3063;&amp;#x3057;&amp;#x3083;&amp;#x308B;&amp;#x3068;&amp;#x601D;&amp;#x3044;&amp;#x307E;&amp;#x3059;&amp;#x304C;&amp;#x3001;WebSocket&amp;#x306E;&amp;#x63A2;&amp;#x3057;&amp;#x65B9;&amp;#x3092;&amp;#x8AAC;&amp;#x660E;&amp;#x3057;&amp;#x305F;&amp;#x3044;&amp;#x3068;&amp;#x601D;&amp;#x3044;&amp;#x307E;&amp;#x3059;&amp;#x3002;\n
  • #69 Google&amp;#x306E;&amp;#x30D6;&amp;#x30E9;&amp;#x30A6;&amp;#x30B6;&amp;#x3001;&amp;#x30AF;&amp;#x30ED;&amp;#x30FC;&amp;#x30E0;&amp;#x3082;&amp;#x5834;&amp;#x5408;&amp;#x3067;&amp;#x3059;&amp;#x3002;\n
  • #70 \n
  • #71 \n
  • #72 \n
  • #73 \n
  • #74 \n