1.服务端
首先看看依赖文件:
{
"name":"ws-echo"
,"version":"0.0.1"
,"dependencies":{
"express":"2.5.1"
,"socket.io":"0.9.2"
}
}
然后是服务器代码:
var express = require('express');
var sio = require('socket.io');
var app = express.createServer();
app.use(express.bodyParser());
app.use(express.static('public'));
app.listen(3000);
var io = sio.listen(app);
io.sockets.on('connection',function(socket){
console.log('someone connected');
socket.on('join',function(name){
console.log("%s join",name);
socket.nickname = name;
socket.broadcast.emit('announcement',name + ' joined the chat.');
});
socket.on('text',function(msg){
socket.broadcast.emit('text',socket.nickname,' '+msg);
});
});
sio.listen (app)是将socket.io绑定到APP的,这样就可以为所欲为了。最爽的事情是,通信可以通过相应字符串标示的类型进行处理,如‘join’、‘text’.
2.客户端
客户端的文件放在public 文件夹下,工程文件大致如下图所示
接下来看看客户端的3个文件:
index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="/chat.js"></script>
<link href="/chat.css" rel ="stylesheet"/>
</head>
<body>
<div id ="chat">
<ul id="messages"></ul>
<form id="form">
<input type = "text" id="input"/>
<button>Send</button>
</form>
</div>
</body>
</html>
通过src可以将js文件放在服务器端,支出相对路劲。但是这个socket.io/socket.io.js让我有点疑惑,服务器并没有这个路径,但是没有这个src,客户端是无法正常工作的。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
chat.css
/*...*/
#chat { display: none}
window.onload = function(){
var socket = io.connect();
socket.on('connect',function(){
socket.emit('join',prompt('what is your nickname?'));
document.getElementById('chat').style.display = 'block';
});
socket.on('announcement',function(msg){
var li = document.createElement('li');
li.className = 'announcement';
li.innerHTML = msg;
document.getElementById('messages').appendChild(li);
});
function addMessage(from,text){
var li = document.createElement('li');
li.className = 'message';
li.innerHTML = '<b>' + from +'</b>' + text;
document.getElementById('messages').appendChild(li);
}
var input = document.getElementById('input');
document.getElementById('form').onsubmit = function(){
addMessage('me ',input.value);
socket.emit('text',input.value);
input.value = '';
input.focus();
return false;
};
socket.on('text',addMessage);
}
io.connect 应该是建立一个socket.io的链接,这个通信过程使用的应该是websocket。prompt的作用是弹出一个提示框,输入nickname,包含一个ok按钮和一个cancel按钮,如果点击ok按钮,会将输入作为返回值。
参考:《了不起的Node.js》