0、知识点
- express
- Socket.io
- 实现聊天室
1、app.js
/**
* Created by Administrator on 2017/10/27 0027.
*/
var express=require('express');
var app=express();
var DB=require('./module/db.js');
app.set('view engine','ejs');
app.use(express.static('public'));
//express里面使用socket.io
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(8000);
app.get('/',function(req,res){
//res.send('首页');
res.render('index');
})
app.get('/chat',function(req,res){
//res.send('首页');
var name=req.query.name;
res.render('chat',{
name:name
});
})
//写socket.io 服务端
io.on('connection',function(socket){
console.log('有个客户端连接了');
socket.on('message',function(data){
io.emit('message',data); /*全部广播*/
})
})
-
智能机器人截图
-
聊天室截图
2、index.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
html {
height: 100%;
background: url("banner-bg_2x.jpg") no-repeat center center / 100% auto #1B1C3B;
}
.box{
width: 400px;
height: 60px;
display: flex;
margin:200px auto;
}
.box input[type='text']{
flex: 1;
height: 60px;
border: 1px solid #eee;
}
.box button{
width: 100px;
height: 64px;
background: orange;
color: #fff;
border:none;
cursor: pointer;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('.login').click(function(){
var name=$('#name').val();
if(name){
location.href='/chat?name='+name;
}else{
alert('您的大名不对');
}
})
})
</script>
</head>
<body>
<div class="box">
<input type="text" placeholder="请输入您的大名" id="name"/> <button class="login">进入聊天室</button>
</div>
</body>
</html>
3、chat.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
.inner{
max-width: 640px;
margin: 0 auto;
}
h2 {
text-align: center;
background: #eee;
color: red;
height: 50px;
line-height: 50px;
}
.chat{
padding:20px;
border: 1px solid #f60;
height: 500px;
}
.send{
width: 100%;
bottom:5px;
height: 44px;
line-height: 44px;
display: flex;
overflow-x: hidden;
}
.send input[type='text']{
flex: 1;
}
.send input[type='button']{
width: 100px;
}
</style>
<script src="/socket.io/socket.io.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
var socket=io.connect('http://localhost:8000');
socket.on('message',function(data){ /*监听服务器广播的数据*/
$(".list").append(`<li><strong>${data.name}:</strong> ${data.msg}</li>`);
$('#msg').val('');
$('.footer').get(0).scrollIntoView(true);
})
//发送数据
$('#send').click(function(){
socket.emit('message',{
msg:$('#msg').val(),
name:'<%=name%>'
})
})
})
</script>
</head>
<body>
<div class="inner">
<h2>小小聊天室</h2>
<div class="chat" style="overflow-x: auto">
<ul class="list">
</ul>
<p class="footer"> </p>
</div>
<div class="send">
<input type="text" id="msg"/>
<input type="button" id="send" value="发送"/>
</div>
</div>
</body>
</html>
4、db.js
/**
* Created by Administrator on 2017/10/23 0023.
*/
//封装操作数据库的方法
var config=require('./config.js');
var MongoClient=require('mongodb').MongoClient;
var ObjectID = require('mongodb').ObjectID; /*查找_id*/
var dbUrl =config.dbUrl;
//封装连接数据库的方法
function _connect(callback){
MongoClient.connect(dbUrl,function(err,db){
if(err){
console.log('数据库连接失败');
console.log(err);
return;
}
callback(db);
})
}
exports.ObjectID=ObjectID;
/*
db.find('user',{},function(err,data){
console.log(data)
})
* */
/*
* json1 条件
* json2 列数
* json3 配置信息
* */
exports.find=function(collectionName,json1,json2,json3,callback){
if(arguments.length==3){
var cb=json2;
var col={}; /*查询的列*/
var skip=0;
var limit=0;
}else if(arguments.length==4){
var cb=json3;
var col=json2; /*查询的列*/
var skip=0;
var limit=0;
}else if(arguments.length==5){
var cb=callback;
var col=json2; /*查询的列*/
//json3={
// page，
// pageSize
//}
var limit=json3.pageSize || 10; /*如果pageSize 每页10条*/
var skip=json3.page? (json3.page-1)*limit : 0; /*page每页传显示第一页*/
}else{
console.log('传入参数错误');
return;
}
_connect(function(db){
var result=db.collection(collectionName).find(json1,col).skip(skip).limit(limit);
result.toArray(function(err,data){
db.close();
cb(err,data);
})
})
}
/*
db.insert("user",{"name":"zhangsan"},function(){
})
增加数据
* */
exports.insert=function(collectionName,json,callback){
_connect(function(db){
db.collection(collectionName).insertOne(json,function(err,result){
db.close();
callback(err,result);
})
})
}
/*
db.update('user',{"id":123},{'name':"zhangsan"},function(){
})
更新数据
*
* */
exports.update=function(collectionName,json1,json2,callback){
_connect(function(db){
db.collection(collectionName).updateOne(json1,{
$set:json2
},function(err,result){
db.close();
callback(err,result);
})
})
}
//封装删除的方法
exports.remove=function(collectionName,json,callback){
_connect(function(db){
db.collection(collectionName).removeOne(json,function(err,result){
db.close();
callback(err,result);
})
})
}
exports.count=function(collectionName,json,callback){
_connect(function(db){
db.collection(collectionName).count(json,function(err,data){
callback(err,data)
})
})
}
5、config.js
/**
* Created by Administrator on 2017/10/23 0023.
*/
var dbUrl = 'mongodb://localhost:27017/cms';
module.exports={
dbUrl:dbUrl
}