## 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规划用户表```js/*用户定义*/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()}, }});```聊天会话表```js/*会话定义*/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服务```jsvar server = require('http').createServer(app);var io = require('socket.io').listen(server);```还要在前端页面引入socke.js文件```js```在打开页面的同时，创建一个io对象```jsvar socket = io();```#### emit和onsocket.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函数。类似于自定义函数声明。 #### 官方APIio.on('connection', function(socket){}); 在连接socket时，启动I/O通讯，自动触发其中的函数，相当于是当前socket的入口文件。 io.on('disconnect', function(socket){}); 与socket断开I/O通讯时，执行。
网友评论