node.js搭建简单的websocket

1、首先在官网http://www.nodejs.org/下载NODE.JS

2、打开命令行CMD,进入NODEJS\node_modules\的目录,输入npm install socket.io  安装socket.io模块.别急着关掉此CMD窗口,后面有用

3、搭建服务端代码server.js

 1 var http = require('http');

 2 var io = require('socket.io');

 3 var cisserver = http.createServer(function (request, response) {

 4     response.writeHead(200, { 'Content-Type': 'text/html' });

 5     response.end('start!');

 6 

 7 }).listen(8000);

 8 

 9 var ccisSocket = io.listen(cisserver); //.set('log', 1);

10 ccisSocket.on('connection', function (client) {

11     client.on('message', function (data) {

12         console.log('client message', data);

13         client.emit('message', data);

14         client.on('disconnect', function () { console.log('disconnect') })

15     })

16 })

4、切换之前NODEJS的命令行窗口输入node server.js开启监听模式

5、客户端代码

    

 1   <!DOCTYPE html> 

 2     <html> 

 3     <head> 

 4         <script src='http://localhost:8000/socket.io/socket.io.js'></script> 

 5     </head> 

 6     <body> 

 7         <script> 

 8             var HTML5WebSockets = {};

 9             HTML5WebSockets.socketio = {

10                 yoursocket: null,

11 

12                 initialize: function () {

13 

14                     HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:8000');

15 

16                     HTML5WebSockets.socketio.yoursocket.on('connect', function () {

17                         HTML5WebSockets.socketio.log('You are connected to Server<br />');

18                         HTML5WebSockets.socketio.yoursocket.send("目前有值");

19                     });

20 

21                     HTML5WebSockets.socketio.yoursocket.on('message', function (data) {

22                         //alert(data);

23                         HTML5WebSockets.socketio.log('Server Response:  ' + data + '<br />');

24                     });

25 

26                     HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {

27                         HTML5WebSockets.socketio.log('You are disconnected from Server<br />');

28                     });

29 

30                     document.querySelector('#sendMes').onclick = function () {

31                         HTML5WebSockets.socketio.sendMessageToServer(document.getElementById("mes").value);

32                         document.getElementById("mes").value = '';

33                     };

34 

35                 },

36                 sendMessageToServer: function (data) {

37                     HTML5WebSockets.socketio.yoursocket.send(data);

38                     HTML5WebSockets.socketio.log('Message to Server: ' + data + '<br />');

39                 },

40 

41                 log: function (message) {

42                     document.getElementById("log").innerHTML += message;

43                 }

44             }  

45         </script> 

46        

47         <div id='log'></div> 

48         <input type='text' id='mes' /> 

49         <button type='button' id='sendMes'>Send</button> 

50         <br />    

51         <script> 

52             HTML5WebSockets.socketio.initialize();  

53         </script> 

54     </body> 

55     </html> 

7、运行HTML文件,输入值,等待服务端返回的结果

 

你可能感兴趣的:(websocket)