1.前端页面构建
登录注册界面
仿造网页微信的登录界面，把二维码扫描登录改成了双面翻转的登录注册板块。
动画部分，使用animate.css制作登录与注册界面的翻转动画。
具体实现代码：
正反双面div容器
#card {
display: block;
position: absolute;
transition: width 1.8s cubic-bezier(0.23, 1, 0.32, 1), height 1.8s cubic-bezier(0.23, 1, 0.32, 1), transf/Users/trick/Documents/web/学习日记/技术文档10.08-10.15.mdorm 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
正面登录
.front-box {
backface-visibility: hidden;
transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
反面注册
#card .back-box {
/*在反过来之前,它是倒着的*/
transform: translateZ(-1px) rotateY(180deg);
}
当点击翻转时，给双面容器div添加.is-open的class
.is-open {
transform: rotateY(180deg);
}
微信聊天界面
完全仿造网页微信聊天窗口，后期还需要修改成手机端效果
2.schema规划
用户表
/*用户定义*/
var userSchema;
userSchema = new Schema({
username: String,
password: String,
sexual: Boolean,
//该用户的好友数组,用户可以再这个数组中不断push入新的好友
contact :[{
type: Schema.Types.ObjectId,
ref: 'User'
}],
meta: {
createAt : { type:Date, default: Date.now()},
lastLoginAt : { type:Date, default: Date.now()},
}
});
聊天会话表
/*会话定义*/
var msgSchema = new Schema({
sender: String,
receiver: String,
msgContent: String,
createAt: {type:Date, default: Date.now()}
});
var sessionSchema = new Schema({
contact1: {
type: Schema.Types.ObjectId,
ref: 'User'
},
contact2: {
type: Schema.Types.ObjectId,
ref: 'User'
},
//该会话的聊天消息数组，每次新增一条聊天记录，就push进这个消息数组中
chatHistory: [msgSchema],
meta: {
createAt: {type:Date, default: Date.now()},
lastChatAt: {type:Date, default: Date.now()}
}
})
3.socket.io学习笔记
搭建http服务
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
还要在前端页面引入socke.js文件
在打开页面的同时，创建一个io对象
var socket = io();
emit和on
socket.emit('action');表示发送了一个action命令，命令是字符串的，在另一端接收时，可以这么写： socket.on('action',function(){...});
socket.emit('action',data);表示发送了一个action命令，还有data数据，在另一端接收时，可以这么写： socket.on('action',function(data){...});
socket.emit(action,arg1,arg2); 表示发送了一个action命令，还有两个数据，在另一端接收时，可以这么写： socket.on('action',function(arg1,arg2){...});
在emit方法中包含回调函数，例如：
socket.emit('action',data, function(arg1,arg2){...} );那么这里面有一个回调函数可以在另一端调用，另一端可以这么写：socket.on('action',function(data,fn){ fn('a','b') ; });
上面的data数据可以有0个或者多个，相应的在另一端改变function中参数的个数即可，function中的参数个数和顺序应该和发送时一致
上面的fn表示另一个端传递过来的参数，是个函数，写fn('a','b') ;会回调函数执行。一次发送不应该写多个回调，否则只有最后一个起效，回调应作为最后一个参数。
总结：
socket.emit('action')：发送一个'action'请求，添加data参数表示同时发送data数据，添加function表示同时调用回调函数。类似于自定义函数调用
socket.on(‘action',function(){})：接收一个'action'请求时，调用执行function函数。类似于自定义函数声明。
官方API
io.on('connection', function(socket){});
在连接socket时，启动I/O通讯，自动触发其中的函数，相当于是当前socket的入口文件。
io.on('disconnect', function(socket){});
与socket断开I/O通讯时，执行。