这段时间进了一个新的项目组，项目是用Appcan来做一个跨平台的移动运维系统，其中前台和后台之间本来是打算用WebSocket来实现的，但写好了示例后发现android不支持WebSocket，大为受挫。后在园子里看到用socket.io可以代替WebSocket，然而对于我这样JS都没学全的来说有多了一块要啃的砖头了，没奈何还是要硬着头皮上。下面是我用node.js和socket.io做的一个简易的Web聊天室，不过只支持局域网。由于也是刚学这些所以做的不好就请见谅了。
以下是服务端代码index.js代码
var module = require("./server");
var chatroom = new module.Chatroom();
chatroom.setConfig({"Port":8080, "IP":"192.168.2.105"});
chatroom.startUp();
index.js
服务端server.js代码
exports.Chatroom = function()
{
var m_config = {"Port":8080, "IP":"127.0.0.1"};
this.users = new Array();
this.setConfig = function(cfg)
{
for(var x in cfg)
{
m_config[x] = cfg[x];
}
} this.startUp = function()
{
io = require('socket.io').listen(m_config.Port, m_config.IP);
io.sockets.on('connection', function(socket){
console.log('new client connect');
socket.on('disconnection', function(data){ });
socket.on('message', function(data){
var msg = JSON.parse(data);
socket.broadcast.emit("message", data);
});
socket.on('login', function(data){
var user = JSON.parse(data);
console.log(user.UserName + " log in");
socket.broadcast.emit("message", JSON.stringify({"Type":"login", "UserName":user.UserName}));
});
socket.on('logoff', function(data){
var user = JSON.parse(data);
socket.broadcast.emit("message", JSON.stringify({"Type":"logoff", "UserName":user.UserName}));
console.log(user.UserName + " log off");
});
});
console.log('chatroom start up!');
}
}
server.js
客户端index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatroom</title>
<link rel="stylesheet" href="style.css">
<script src="socket.io.js"></script>
<script>
var socket;
function onConnect_Click()
{
if(txtUserName.value === "")
{
alert("请输入用户名");
return;
} socket = io.connect("http://127.0.0.1:8080"); socket.on('connect', function(){
socket.emit('login', JSON.stringify({
'UserName' : txtUserName.value
}));
}); socket.on('message', function(data){
var msg = JSON.parse(data);
var display = document.getElementById("message-log"); switch(msg.Type)
{
case "login":
txtMsgLog.value += msg.UserName+"上线\r\n";
break;
case "logoff":
txtMsgLog.value += msg.UserName+"离线\r\n";
break;
case "message":
txtMsgLog.value += msg.UserName + ":" + msg.Message + "\r\n";
break;
}
});
} function onSend_Click()
{
var data = JSON.stringify({"Type":"message", "UserName":txtUserName.value, "Message":txtMsgInput.value});
socket.emit("message", data);
txtMsgLog.value += txtUserName.value + ":" + txtMsgInput.value + "\r\n";
txtMsgInput.value = "";
} function onCancel_Click()
{
txtMsgInput.value = "";
} function onDisconnect_Click()
{
socket.emit('logoff', JSON.stringify({
'UserName' : txtUserName.value
}));
}
</script>
</head>
<body>
<div id="page">
<div id="content">
<div id="message-log">
<textarea id="txtMsgLog"></textarea>
</div>
<div id="message-input">
<textarea id="txtMsgInput"></textarea>
<div id="message-buttons">
<label for="txtUserName">用户姓名</label>
<input type="text" id="txtUserName" size="20">
<button id="btnConnect" onClick="onConnect_Click()">连接</button>
<button id="btnDisconnect" onClick="onDisconnect_Click()">断开</button>
<button id="btnSend" onClick="onSend_Click()">发送</button>
<button id="btnCancel" onClick="onCancel_Click()">取消</button>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
客户端样式文件style.css
html, body, div
{
margin:;
padding:;
} #page
{
width:600px;
height:600px;
margin-left:auto;
margin-right:auto;
border:1px solid green;
} #content
{
width:100%;
height:100%;
} #message-log
{
width:580px;
height:400px;
margin:10px;
text-align:center;
border:1px solid green;
} #txtMsgLog
{
width:570px;
height:390px;
text-align:left;
} #message-input
{
width:580px;
height:160px;
margin:10px;
border:1px solid green;
text-align:center;
} #txtMsgInput
{
width:570px;
margin:;
height:100px;
text-align:left;
} #message-buttons
{
width:580px;
margin:10px;
}
#right-content
{
width:200px;
height:600px;
float:right;
border:1px solid green;
} #msg-user
{
color:red;
} #msg-content
{
color:green;
}
style.css