node.js搭建简单的websocket

2024-04-27 14:20:12

字体：大中小

来源：转载

供稿：网友

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

上一篇：javascript实现浏览器窗口传递参数

下一篇：重新理解javascript回调函数