`
zzc1684
  • 浏览: 1182859 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

用socket.io实现WebSocket的一个简单例子

阅读更多

客户端代码:
Html代码

 

    <html>  
    <head>  
        <title></title>  
        <script src="../js/socket.io.client.js"></script>  
        <script type="text/javascript">  
            function doit() {  
                var socket = io.connect('http://localhost');  
                socket.on('news', function (data) {//接收到服务器发送过来的名为'new'的数据  
                    console.log(data.hello);//data为应服务器发送过来的数据。  
                    socket.emit('my new event', { my:'new data' });//向服务器发送数据,实现双向数据传输  
                });  
                socket.on('other', function (data) {//接收另一个名为'other'数据,  
                    console.log(data.hello);  
                    socket.emit('event1', { my:'other data' });  
                });  
            }  
        </script>  
    </head>  
    <body>  
    <button id='btn' onclick="doit()">click me</button>  
    </body>  
    </html>  

 

 

在chrome,Crtl+Shift+j打开终端,可看到输出结果。
socket.io.client.js可以https://github.com/LearnBoost/socket.io-client下载到本地,在<script src="..">指向本机的js库。

服务器用nodejs实现
代码
Javascript代码

 

    var http= require('http'), io= require('socket.io'), express= require('express');  
    var app = express.createServer(), io = io.listen(app);  
      
    app.listen(80);  
      
    io.sockets.on('connection', function (socket) {  
      socket.emit('news', { hello: 'world' });//监听,一旦客户端连接上,即发送数据,第一个参数'new'为数据名,第二个参数既为数据  
      socket.on('my other event', function (data) {//捕获客户端发送名为'my other event'的数据  
        console.log(data.my);  
      });  
      
      socket.emit('other', { hello: 'other world' });//发送另一个数据  
      socket.on('evnet1', function (data) {//捕获另外一个数据  
        console.log(data.my);  
      });  
    });  

 

 

测试结果,客户端可正常显示

引用
world
other world



服务器端显示结果:

引用
C:\java\Nodejs>node server2.js
   info  - socket.io started
   debug - client authorized
   info  - handshake authorized 15551970622100878177
   debug - setting request GET /socket.io/1/websocket/15551970622100878177
   debug - set heartbeat interval for client 15551970622100878177
   debug - client authorized for
   debug - websocket writing 1::
   debug - websocket writing 5:::{"name":"news","args":[{"hello":"world"}]}
   debug - websocket writing 5:::{"name":"other","args":[{"hello":"other world"}
]}
   debug - emitting heartbeat for client 15551970622100878177
   debug - websocket writing 2::
   debug - set heartbeat timeout for client 15551970622100878177
   debug - got heartbeat packet
   debug - cleared heartbeat timeout for client 15551970622100878177
   debug - set heartbeat interval for client 15551970622100878177
^C
 
在世界的中心呼喚愛 写道
提示找不到 express

npm install express
另外,有些IO API已经deprecated,改成:
Js代码  收藏代码
  1. var http= require('http'), io= require('socket.io');  
  2. var app = http.createServer(), io = io.listen(app);  
  3. app.listen(81);  

这样就可以不必引用express
 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics