代码地址如下：
http://www.demodashi.com/demo/12477.html
闲暇之余研究了一下 Socket.io，搭建了一个简易版的聊天室，如有不对之处还望指正，先上效果图:
首先是登录页面:
接下来就是聊天页面:
Socket.IO是Node.js的一个模块，它提供通过WebSocket进行通信的一种简单方式，WebSocket协议很复杂，但是Socket.IO提供了服务器和客户端双方的组件，所以只需要一个模块就可以给应用程序加入对WebSocket的支持，而且还能支持不同的浏览器哦。关于其详细介绍请参考官网SocketIO 官网，这里呢我们还是直接上代码。
首先是创建 Socket 服务, 我们的项目启动文件 bin/www，我们就来修改它:
// bin/www
var app = require('../app');
var debug = require('debug')('websocket:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3070');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
var io = require('socket.io').listen(server); //创建 socket 服务
io.on('connection',function(socket){ //监听客户端的连接请求
socket.emit('connected',"连接成功");
socket.on('message',function(msg){ //监听客户端发送的消息
console.log(msg);
socket.emit('content',msg); // 向客户端发送反馈消息
socket.broadcast.emit('content',msg); // 向所有的已连接客户端进行广播消息
});
});
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
...
...在这里我做了一个小的登录控制，也就是 session 的简单使用，具体看下边的路由控制:
// routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('login');
});
router.post('/login',function(req,res){
var name=req.body.name;
req.session.name=name;
res.send("success");
});
router.get('/index',function(req,res){
if(req.session.name!=null && req.session.name!=""){
res.render('index',{name:req.session.name});
}else{
res.redirect('/');
}
});
module.exports = router;
然后接下来创建客户端登录页面:
// views/login.html
登录简化聊天室
请先输入你在聊天室的昵称
聊天室页面:
// views/index.html
简化聊天室
欢迎您: <%=name%>
聊天记录:
内容:
最后实现我们客户端的 socket，进行与服务端进行通信:
// js/main.js
$(function(){
var name = $('#name').text();
// 向服务器发起连接请求
var socket = io.connect('http://localhost:3070');
socket.on('connected',function(){ // 监听连接信息
console.log('已连接');
socket.send("系统："+name+" 连接成功"); // 向客户端发送消息
});
socket.on('content',function(msg){ // 监听服务器发送的消息
var talker="";
var talk="";
var talkString="";
if(msg.indexOf(':')>0){
talker=msg.substring(0,msg.indexOf(':'));
if(msg.indexOf("")>0) {
msg = msg.replace("", "");
}
talk=msg.substring(msg.indexOf(':')+1);
if(talker==name){
talkString="" +
""+talk+"" +
" "+talker+"" +
"";
}else{
talkString="" +
""+talker+": " +
""+talk+"" +
"";
}
}else{
talkString=""+msg+"";
}
$('#content').append(talkString);
scrollBar();
});
$('button').click(function(){
var myWord=$('#myWord').val();
if(socket){
socket.send(name+":"+myWord);
$('#myWord').val("");
scrollBar();
}else{
return;
}
});
//回车发送消息
document.onkeydown = function(e){
var ev = document.all ? window.event : e;
if(ev.keyCode==13) {
$('button').click();
}
}
function scrollBar(){
$(".chatContent").scrollTop($(".chatContent")[0].scrollHeight);
}
});至此，我们的主要工作基本上完成了，其实也没有多少东西
- 创建 socket 服务器，监听客户端连接与消息，发送消息、广播消息
- socket客户端向服务器申请连接，发送与监听消息
这次只是做了一个简易的聊天室功能，下次我们加入 redis 的 订阅/发布 模式，完成更复杂更灵活的聊天功能，敬请期待!
项目结构:
控制台信息:
Express+Socket.IO 实现简易聊天室
代码地址如下：
http://www.demodashi.com/demo/12477.html
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权