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文件，输入值，等待服务端返回的结果
