最近在学nodejs的时候，自己结合所学的知识运用了nodejs的框架express和socket.io实现了下面简单的聊天室
先看一下测试的截图：
服务器端.PNG
在git bash下输入node app.js建立起服务器
浏览器端.PNG
然后再浏览器上输入localhost:3000地址，输入名字之后就能进入聊天室。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chat-room</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascripts/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/chat.js"></script>
</head>
<body>
<div class="contaniner">
<h1>Socket.io - Simple chat room</h1>
<div class="onlinepeople">
</div>
<div id="content"></div>
<div class="input">
<span id="status">Connecting...</span>
<input type="text" id="input" />
</div>
</div>
</body>
</html>
css代码：
* {padding:0px; margin:0px;}
body{font-family:tahoma; font-size:12px;margin:10px;}
p {line-height:18px;padding:2px;}
div {width:500px;}
.contaniner{
width:600px;
height:600px;
border:1px solid #888;
margin:0 auto;
}
.contaniner h1{
text-align: center;
}
#content {
overflow: scroll;
width:80%;
margin:0 auto;
height:70%;
padding:5px;
background:#ddd;
border-radius:5px;
border:1px solid #CCC;
margin-top:10px;
}
.input{
padding-left:50px;
height:10%;
width:100%;
margin:0 auto;
}
#input {
border-radius:2px;
border:1px solid #ccc;
margin-top:10px;
padding:5px;
width:380px;
}
#status {
text-align: center;
width:100px;
display:block;
float:left;
margin-top:15px;
}
服务器端：
/**
* Created by 佳锐 on 2017/3/10.
*/
//使用express快速搭建web服务器
var express = require('express');
var path = require('path');
var app = express();
var server = require('http').createServer(app);
//使用socket.io监听事件
var io = require('socket.io').listen(server);
//对express配置时，从express3迁移到4的一些改变
var favicon = require('serve-favicon');
var logger = require('morgan');
var bodyParser = require('body-parser');
var multer = require('multer');
var methodOverride = require('method-override');
var errorHandler = require('errorhandler');
//设置日志级别
io.set('log level',1);
//在线人数
var onlineCount = 0;
//历史信息容器
var historyContent = [];
//socket监听连接事件
io.on('connection',function(socket){
socket.emit('onlinepeople',onlineCount);
socket.emit('historyContentDisplay',historyContent);
onlineCount++;
socket.emit('open');//通知客户端已连接
//打印握手信息
//console.log(socket.handshake);
//构造客户端对象
var client = {
socket:socket,
name:false,
color:getColor()
}
//对message事件的监听
socket.on('message',function(msg){
//console.log("111");
var obj = {
time:getTime(),
color:client.color
};
//判断是不是第一次连接，以第一条信息作为用户名
if(!client.name){
client.name = msg;
obj['text']=client.name;
obj['author']='System';
obj['type']='welcome';
console.log(client.name+'login');
//返回欢迎语
//触发事件，返回给客户端
socket.emit('system',obj);
//广播新用户登录
socket.broadcast.emit('system',obj);
//触发客户端的onlinepeople事件
socket.emit('onlinepeople',onlineCount);
}else{
//如果不是第一次的连接，正常的聊天消息
obj['text']=msg;
obj['author']=client.name;
obj['type']='message';
console.log(client.name+'say:'+msg);
//返回消息
//触发事件
socket.emit('message',obj);
//广播向其他用户发消息
socket.broadcast.emit('message',obj);
}
//console.log(client.name);
console.log("在线人数:"+onlineCount);
historyContent.push({
'author':obj['author'],
'time':obj['time'],
'msg':msg,
'type':obj['type']
});
console.log(historyContent);
});
//监听退出事件
socket.on('disconnect',function(){
onlineCount--;
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
};
historyContent.push({
'author':obj['author'],
'time':obj['time'],
'msg':obj['text'],
'type':obj['type']
});
//广播用户已退出
socket.broadcast.emit('system',obj);
console.log(client.name+'Disconnect');
});
});
//express基本配置
app.set('port',process.env.PORT || 3000);
app.set('views',__dirname+'/views');
// app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser());
app.use(methodOverride());
//使用express发送css js等静态资源
app.use(express.static(path.join(__dirname, 'public')));
if ('development' == app.get('env')) {
app.use(errorHandler());
}
//指定websocket的客户端的html文件
//express获得get请求时将chat.html文件返回给浏览器
app.get('/',function(req,res){
res.sendfile('views/chat.html');
});
//服务器监听端口
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var getTime=function() {
var date = new Date();
return date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
};
var getColor=function(){
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
'orange','blue','blueviolet','brown','burlywood','cadetblue'];
return colors[Math.round(Math.random() * 10000 % colors.length)];
};
首先使用express快速搭建web服务器
var express = require('express');
var path = require('path');
var app = express();
var server = require('http').createServer(app);
然后使用socket.io监听服务器
var io = require('socket.io').listen(server);
进行express的配置过程中，因为我的版本是express3，最新版本是express4，所以需要做一定的迁移步骤，具体如下
var favicon = require('serve-favicon');
var logger = require('morgan');
var bodyParser = require('body-parser');
var multer = require('multer');
var methodOverride = require('method-override');
var errorHandler = require('errorhandler');
app.set('port',process.env.PORT || 3000);
app.set('views',__dirname+'/views');
// app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser());
app.use(methodOverride());
//使用express发送css js等静态资源
app.use(express.static(path.join(__dirname, 'public')));
if ('development' == app.get('env')) {
app.use(errorHandler());
}
socket监听连接事件
客户端代码：
/**
* Created by 佳锐 on 2017/3/10.
*/
$(function(){
var content = $('#content');
var status = $('#status');
var input = $('#input');
var online = $('.onlinepeople');
var myName = false;
//建立websocket连接
socket = io.connect('http://localhost:3000');
//收到server的连接确认
socket.on('open',function(){
status.text('Choose a name:');
});
//监听system事件，判断welcome或者disconnect,打印系统消息信息
socket.on('system',function(json){
var p = '';
if (json.type === 'welcome'){
if(myName == json.text) status.text(myName + ': ').css('color', json.color);
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Welcome ' + json.text +'</p>';
}else if(json.type == 'disconnect'){
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Bye ' + json.text +'</p>';
}
content.prepend(p);
});
socket.on('onlinepeople',function(onlineCount){
online.text('');
var p = '<h2 style="margin-left:50px;">在线人数：'+onlineCount+'</h2>';
online.prepend(p);
});
socket.on('historyContentDisplay',function(historyConten){
if(historyConten.length != 0) {
for (var i = 0; i < historyConten.length; i++) {
if(historyConten[i].type == 'welcome'){
var p = '<p><span style="color:'+historyConten[i].color+';">' + historyConten[i].author+'</span> @ '+ historyConten[i].time+ ' : Welcome '+historyConten[i].msg+'</p>';
content.prepend(p);
} else if(historyConten[i].type == 'disconnect'){
var p = '<p><span style="color:'+historyConten[i].color+';">' + historyConten[i].author+'</span> @ '+ historyConten[i].time+ ' : Bye'+historyConten[i].msg+'</p>';
content.prepend(p);
} else{
var p = '<p><span style="color:'+historyConten[i].color+';">' + historyConten[i].author+'</span> @ '+ historyConten[i].time+ ' : '+historyConten[i].msg+'</p>';
content.prepend(p);
}
}
return;
} else{
return;
}
});
//发送事件到服务端
//监听message事件，打印消息信息
socket.on('message',function(json){
var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> @ '+ json.time+ ' : '+json.text+'</p>';
content.prepend(p);
});
//通过“回车”提交聊天信息
input.keydown(function(e){
if(e.keyCode == 13){
var msg = $(this).val();
if(!msg){
return;
}
socket.send(msg);//将msg发送到服务器端
$(this).val('');
if(myName === false){
myName = msg;
}
}
});
});
网友评论