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

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

客户端代码:

Html代码 1.<html> 

2.<head> 

3.    <title></title> 

4.    <script src=\'#\'" /js/socket.io.client.js"></script> 

5.    <script type="text/javascript"> 

6.        function doit() {  

7.            var socket = io.connect('http://localhost');  

8.            socket.on('news', function (data) {//接收到服务器发送过来的名为'new'的数据  

9.                console.log(data.hello);//data为应服务器发送过来的数据。  

10.                socket.emit('my new event', { my:'new data' });//向服务器发送数据,实现双向数据传输  

11.            });  

12.            socket.on('other', function (data) {//接收另一个名为'other'数据,  

13.                console.log(data.hello);  

14.                socket.emit('event1', { my:'other data' });  

15.            });  

16.        }  

17.    </script> 

18.</head> 

19.<body> 

20.<button id='btn' me</button> 

21.</body> 

22.</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' me</button>

</body>

</html>
复制代码在chrome,Crtl+Shift+j打开终端,可看到输出结果。
socket.io.client.js可以https://github.com/LearnBoost/socket.io-client下载到本地,在<script src=\'#\'" /p>

服务器用nodejs实现
代码

Javascript代码 1.var http= require('http'), io= require('socket.io'), express= require('express');  

2.var app = express.createServer(), io = io.listen(app);  

3. 

4.app.listen(80);  

5. 

6.io.sockets.on('connection', function (socket) {  

7.  socket.emit('news', { hello: 'world' });//监听,一旦客户端连接上,即发送数据,第一个参数'new'为数据名,第二个参数既为数据  

8.  socket.on('my other event', function (data) {//捕获客户端发送名为'my other event'的数据  

9.    console.log(data.my);  

10.  });  

11. 

12.  socket.emit('other', { hello: 'other world' });//发送另一个数据  

13.  socket.on('evnet1', function (data) {//捕获另外一个数据  

14.    console.log(data.my);  

15.  });  

16.}); 

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
复制代码

 

你可能感兴趣的:(JavaScript,function,客户端,title,休闲)