基于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();

index.js

服务端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 }

server.js

客户端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+"上线
";
34                             break;
35                         case "logoff":
36                             txtMsgLog.value += msg.UserName+"离线
";
37                             break;    
38                         case "message":
39                             txtMsgLog.value += msg.UserName + ":" + msg.Message + "
";
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 + "
";
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>

index.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 }

style.css