最近在學(xué)nodejs的時(shí)候允华，自己結(jié)合所學(xué)的知識(shí)運(yùn)用了nodejs的框架express和socket.io實(shí)現(xiàn)了下面簡(jiǎn)單的聊天室
先看一下測(cè)試的截圖：
服務(wù)器端.PNG
在git bash下輸入node app.js建立起服務(wù)器
瀏覽器端.PNG
然后再瀏覽器上輸入localhost:3000地址兰粉，輸入名字之后就能進(jìn)入聊天室子寓。
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;
}
服務(wù)器端：
/**
* Created by 佳銳 on 2017/3/10.
*/
//使用express快速搭建web服務(wù)器
var express = require('express');
var path = require('path');
var app = express();
var server = require('http').createServer(app);
//使用socket.io監(jiān)聽(tīng)事件
var io = require('socket.io').listen(server);
//對(duì)express配置時(shí)岛啸，從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');
//設(shè)置日志級(jí)別
io.set('log level',1);
//在線人數(shù)
var onlineCount = 0;
//歷史信息容器
var historyContent = [];
//socket監(jiān)聽(tīng)連接事件
io.on('connection',function(socket){
socket.emit('onlinepeople',onlineCount);
socket.emit('historyContentDisplay',historyContent);
onlineCount++;
socket.emit('open');//通知客戶(hù)端已連接
//打印握手信息
//console.log(socket.handshake);
//構(gòu)造客戶(hù)端對(duì)象
var client = {
socket:socket,
name:false,
color:getColor()
}
//對(duì)message事件的監(jiān)聽(tīng)
socket.on('message',function(msg){
//console.log("111");
var obj = {
time:getTime(),
color:client.color
};
//判斷是不是第一次連接庶弃，以第一條信息作為用戶(hù)名
if(!client.name){
client.name = msg;
obj['text']=client.name;
obj['author']='System';
obj['type']='welcome';
console.log(client.name+'login');
//返回歡迎語(yǔ)
//觸發(fā)事件痛侍，返回給客戶(hù)端
socket.emit('system',obj);
//廣播新用戶(hù)登錄
socket.broadcast.emit('system',obj);
//觸發(fā)客戶(hù)端的onlinepeople事件
socket.emit('onlinepeople',onlineCount);
}else{
//如果不是第一次的連接蚜枢，正常的聊天消息
obj['text']=msg;
obj['author']=client.name;
obj['type']='message';
console.log(client.name+'say:'+msg);
//返回消息
//觸發(fā)事件
socket.emit('message',obj);
//廣播向其他用戶(hù)發(fā)消息
socket.broadcast.emit('message',obj);
}
//console.log(client.name);
console.log("在線人數(shù):"+onlineCount);
historyContent.push({
'author':obj['author'],
'time':obj['time'],
'msg':msg,
'type':obj['type']
});
console.log(historyContent);
});
//監(jiān)聽(tīng)退出事件
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']
});
//廣播用戶(hù)已退出
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發(fā)送css js等靜態(tài)資源
app.use(express.static(path.join(__dirname, 'public')));
if ('development' == app.get('env')) {
app.use(errorHandler());
}
//指定websocket的客戶(hù)端的html文件
//express獲得get請(qǐng)求時(shí)將chat.html文件返回給瀏覽器
app.get('/',function(req,res){
res.sendfile('views/chat.html');
});
//服務(wù)器監(jiān)聽(tīng)端口
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服務(wù)器
var express = require('express');
var path = require('path');
var app = express();
var server = require('http').createServer(app);
然后使用socket.io監(jiān)聽(tīng)服務(wù)器
var io = require('socket.io').listen(server);
進(jìn)行express的配置過(guò)程中皆刺，因?yàn)槲业陌姹臼莈xpress3妇蛀，最新版本是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發(fā)送css js等靜態(tài)資源
app.use(express.static(path.join(__dirname, 'public')));
if ('development' == app.get('env')) {
app.use(errorHandler());
}
socket監(jiān)聽(tīng)連接事件
客戶(hù)端代碼：
/**
* 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的連接確認(rèn)
socket.on('open',function(){
status.text('Choose a name:');
});
//監(jiān)聽(tīng)system事件评架，判斷welcome或者disconnect,打印系統(tǒng)消息信息
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;">在線人數(shù)：'+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;
}
});
//發(fā)送事件到服務(wù)端
//監(jiān)聽(tīng)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);
});
//通過(guò)“回車(chē)”提交聊天信息
input.keydown(function(e){
if(e.keyCode == 13){
var msg = $(this).val();
if(!msg){
return;
}
socket.send(msg);//將msg發(fā)送到服務(wù)器端
$(this).val('');
if(myName === false){
myName = msg;
}
}
});
});
