基于Node.js+socket.IO创建的Web聊天室
这段时间进了一个新的项目组，项目是用Appcan来做一个跨平台的移动运维系统，其中前台和后台之间本来是打算用WebSocket来实现的，但写好了示例后发现android不支持WebSocket，大为受挫。后在园子里看到用socket.io可以代替WebSocket，然而对于我这样JS都没学全的来说有多了一块要啃的砖头了，没奈何还是要硬着头皮上。下面是我用node.js和socket.io做的一个简易的Web聊天室，不过只支持局域网。由于也是刚学这些所以做的不好就请见谅了。
以下是服务端代码index.js代码
1 var module = require("./server"); 2 var chatroom = new module.Chatroom(); 3 chatroom.setConfig({"Port":8080, "IP":"192.168.2.105"}); 4 chatroom.startUp();
服务端server.js代码
1 exports.Chatroom = function() 2 { 3 var m_config = {"Port":8080, "IP":"127.0.0.1"}; 4 this.users = new Array(); 5 this.setConfig = function(cfg) 6 { 7 for(var x in cfg) 8 { 9 m_config[x] = cfg[x]; 10 } 11 } 12 13 this.startUp = function() 14 { 15 io = require('socket.io').listen(m_config.Port, m_config.IP); 16 io.sockets.on('connection', function(socket){ 17 console.log('new client connect'); 18 socket.on('disconnection', function(data){ 19 20 }); 21 socket.on('message', function(data){ 22 var msg = JSON.parse(data); 23 socket.broadcast.emit("message", data); 24 }); 25 socket.on('login', function(data){ 26 var user = JSON.parse(data); 27 console.log(user.UserName + " log in"); 28 socket.broadcast.emit("message", JSON.stringify({"Type":"login", "UserName":user.UserName})); 29 }); 30 socket.on('logoff', function(data){ 31 var user = JSON.parse(data); 32 socket.broadcast.emit("message", JSON.stringify({"Type":"logoff", "UserName":user.UserName})); 33 console.log(user.UserName + " log off"); 34 }); 35 }); 36 console.log('chatroom start up!'); 37 } 38 }
客户端index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Chatroom</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="socket.io.js"></script> 8 <script> 9 var socket; 10 function onConnect_Click() 11 { 12 if(txtUserName.value === "") 13 { 14 alert("请输入用户名"); 15 return; 16 } 17 18 socket = io.connect("http://127.0.0.1:8080"); 19 20 socket.on('connect', function(){ 21 socket.emit('login', JSON.stringify({ 22 'UserName' : txtUserName.value 23 })); 24 }); 25 26 socket.on('message', function(data){ 27 var msg = JSON.parse(data); 28 var display = document.getElementById("message-log"); 29 30 switch(msg.Type) 31 { 32 case "login": 33 txtMsgLog.value += msg.UserName+"上线\r\n"; 34 break; 35 case "logoff": 36 txtMsgLog.value += msg.UserName+"离线\r\n"; 37 break; 38 case "message": 39 txtMsgLog.value += msg.UserName + ":" + msg.Message + "\r\n"; 40 break; 41 } 42 }); 43 } 44 45 function onSend_Click() 46 { 47 var data = JSON.stringify({"Type":"message", "UserName":txtUserName.value, "Message":txtMsgInput.value}); 48 socket.emit("message", data); 49 txtMsgLog.value += txtUserName.value + ":" + txtMsgInput.value + "\r\n"; 50 txtMsgInput.value = ""; 51 } 52 53 function onCancel_Click() 54 { 55 txtMsgInput.value = ""; 56 } 57 58 59 60 function onDisconnect_Click() 61 { 62 socket.emit('logoff', JSON.stringify({ 63 'UserName' : txtUserName.value 64 })); 65 } 66 </script> 67 </head> 68 <body> 69 <div id="page"> 70 <div id="content"> 71 <div id="message-log"> 72 <textarea id="txtMsgLog"></textarea> 73 </div> 74 <div id="message-input"> 75 <textarea id="txtMsgInput"></textarea> 76 <div id="message-buttons"> 77 <label for="txtUserName">用户姓名</label> 78 <input type="text" id="txtUserName" size="20"> 79 <button id="btnConnect" onClick="onConnect_Click()">连接</button> 80 <button id="btnDisconnect" onClick="onDisconnect_Click()">断开</button> 81 <button id="btnSend" onClick="onSend_Click()">发送</button> 82 <button id="btnCancel" onClick="onCancel_Click()">取消</button> 83 </div> 84 </div> 85 </div> 86 </div> 87 </body> 88 </html>
客户端样式文件style.css
1 html, body, div 2 { 3 margin:0; 4 padding:0; 5 } 6 7 #page 8 { 9 width:600px; 10 height:600px; 11 margin-left:auto; 12 margin-right:auto; 13 border:1px solid green; 14 } 15 16 #content 17 { 18 width:100%; 19 height:100%; 20 } 21 22 #message-log 23 { 24 width:580px; 25 height:400px; 26 margin:10px; 27 text-align:center; 28 border:1px solid green; 29 } 30 31 #txtMsgLog 32 { 33 width:570px; 34 height:390px; 35 text-align:left; 36 } 37 38 #message-input 39 { 40 width:580px; 41 height:160px; 42 margin:10px; 43 border:1px solid green; 44 text-align:center; 45 } 46 47 #txtMsgInput 48 { 49 width:570px; 50 margin:0; 51 height:100px; 52 text-align:left; 53 } 54 55 #message-buttons 56 { 57 width:580px; 58 margin:10px; 59 } 60 #right-content 61 { 62 width:200px; 63 height:600px; 64 float:right; 65 border:1px solid green; 66 } 67 68 #msg-user 69 { 70 color:red; 71 } 72 73 #msg-content 74 { 75 color:green; 76 }
