微信开发-技术文档(2)10.16-10.23

2016-10-24 本文已影响44人 ccminn

使用shell脚本快速启动mongodb

touch mongodb.sh

使用vi编辑器在脚本中添加自定义的shell命令

vi mongodb.sh

在文件中添加mongodb启动命令

mongod --dbpath /usr/local/Cellar/mongodb/3.2.7/data/db

保存退出，启动shell脚本

./mongodb.sh

socket.io 原理理解总结

socket.io，是一个使用反向ajax方法处理数据的库。获取数据，模拟一个ajax请求向服务器发送数据。
为基于nodejs的web应用，创建一个本地服务器（专用于本个web应用）：
Server端：

var express = require('express')    , app = express()    , server = require('http').createServer(app)    , io = require('socket.io').listen(server);      //监听服务器，监听通过该Server的连接信息，而非监听sockets

在用户端，为每一个（通过登录验证）登入聊天页面的用户、即意图连接本地服务器的用户，创建一个socket，分配唯一的socketID，所有用户独立的socket之间的通讯都建立在Server端的本地服务器中。

Client端：


var socket = io.connect('http://localhost');       //获取socket对象，并且通过这个socket收发事件
//var socket = io.connect('网站地址或ip');

summary：

本地服务器：socket == 一对多的关系

socket：登入用户 == 一对一的关系

服务器端：接受字符串"action"作为客户端发起连接的事件，当连接成功后，调用带有socket参数的回调函数，处理用户的请求。
客户端：发起连接到指定服务器，并且传入当前socket对象。

事件绑定

click ，点击触发
focus，聚焦触发
blur，失焦触发
回车绑定

Socket.IO内置的默认事件

服务器端事件：

io.sockets.on('connection',function(socket) {})
：socket连接成功之后触发，用于初始化
socket.on('message',function(message, callback) {})
：客户端通过socket.send
来传送消息时触发此事件，message为传输的消息，callback是收到消息后要执行的回调
socket.on('anything',function(data) {})
：收到任何事件时触发
socket.on('disconnect',function() {})
：socket失去连接时触发（包括关闭浏览器，主动断开，掉线等任何断开连接的情况）

客户端事件：
connect：连接成功
connecting：正在连接
disconnect：断开连接
connect_failed：连接失败
error：错误发生，并且无法被其他事件类型所处理
message：同服务器端message事件
anything：同服务器端anything事件
reconnect_failed：重连失败
reconnect：成功重连
reconnecting：正在重连

客户端触发顺序：
第一次连接时，事件触发顺序为：connecting->connect；
当失去连接时，事件触发顺序为：disconnect->reconnecting（可能进行多次）->connecting->reconnect->connect。

Socket.io各个发送消息的含义


// send to current request socket client
socket.emit('message', "this is a test");
// sending to all clients, include sender
io.sockets.emit('message', "this is a test");
// sending to all clients except sender
socket.broadcast.emit('message', "this is a test");
// sending to all clients in 'game' room(channel) except sender
socket.broadcast.to('game').emit('message', 'nice game'); 
// sending to all clients in 'game' room(channel), include senderio.sockets.in('game').emit('message', 'cool game');
// sending to individual socketid
io.sockets.socket(socketid).emit('message', 'for your eyes only');
// 进入一个房间
socket.join('room');
// 离开一个房间
socket.leave('room');

发送消息给指定客户端方法

io.sockets.connected[socketid].emit();
io.to(socket.id).emit();
socket.emit();

发送消息原理

客户端向服务器发送任意类型消息。

socket.send();

服务器接收消息数据，执行“message”对应的回调函数。

socket.on('message', function(){});

服务器将接收到的信息保存到数据库中，并且把消息转发到sender客户端、receiver客户端。

io.to(sender).emit('msg',sender, receiver, msg);io.to(receiver).emit('msg',sender, receiver, msg);

客户端接收服务器端发来的消息，在前端页面显示消息div。

socket.on('msg', function (sender, receiver, msg) {// $("div").append("<div>动态创建div</div>") //动态创建代码块 console.log("传递消息ing"); if (sender == _id) {$("#chatting-history").append("<div class='me-msg'><span class='me-chat-icon'></span><div class='me-msg-container'>" + msg + "</div><div class='clear-both'></div></div>"); }else {$("#chatting-history").append("<div class='other-msg'><span class='other-chat-icon'></span><div class='other-msg-container'>" + msg + "</div><div class='clear-both'></div></div>"); }$("#chatting-history").scrollTop($("#chatting-history")[0].scrollHeight);})

JS方法整理

使滚动条一直显示最底下：
$("#dom_id").scrollTop($("#dom_id")[0].scrollHeight);
在div内部动态添加一段代码块：
$("#dom_id").append("<div>………………</div>");

mongodb中populate的使用

使用的目的：实现在一个 document 中填充其他 collection(s) 的 document(s)
在定义Schema
的时候，如果设置某个 field 关联另一个Schema
，那么在获取 document 的时候就可以使用 Population 功能通过关联Schema
的 field 找到关联的另一个 document，并且用被关联 document 的内容替换掉原来关联字段(field)的内容。

文献参考

require is not defined 超出获取域

本意在chat.js中调取dbHelper.js中的函数，用于查找用户，但是获取dbHelper失败，转换思路。
解决方法1：使用socket.emit与socket.on函数，把dbHelper的调用转移到www中去
嵌套层数太多...遂弃之
尝试代码：

//chat.js部分
$(".search-text").keypress(function (e) { //搜索框回车搜索好友
 if (e.which == 13) {
 doSearchFriend();
 }
 });
function doSearchFriend() {
 var keyword = $(\'.search-text\').val();
 var pattern = new RegExp(keyword, "i");
 var queryParams = {username: pattern};
 socket.emit(\'searchUser\',queryParams);
}

//www部分

socket.on(\'searchUser\',function (res,req,queryParams) {
 dbHelper.searchUser( queryParams ,function (err, data) {
 res.render(\'chat\', {entries: data});
 })
})


//dbHelper.js部分
exports.searchUser = function (queryParams, cb) {
 var userList = new Array();
 User.find(queryParams).exec(function (err,docs) {
 for(var i = 0; i < docs.length ; i++){
 userList.push(docs[i].toObject());
 }
 cb(true, userList);
 });
 cb(true, userList);
}

错误原因总结：res传入不正确

解决方法2：使用promise的ajax封装，再通过路由中的post路径方法，调用dbHelper
解决方法3：在搜索结果div中，显示另一个网页，使用iframe
解决方法4：给搜索操作绑定ajax，搜索即请求，在success函数中重写div.html()
解决方法5：绑定搜索事件，load另一个页面的一个div

Request 和 Response 对象

他们起到了服务器与客户机之间的信息传递作用。
Request 对象用于接收客户端浏览器提交的数据，而 Response 对象的功能则是将服务器端的数据发送到客户端浏览器。
Request 对象
从浏览器端取得数据的方法：
Request.QueryString 集合读取表单 GET 方法数据
Request.Form 集合读取表单 POST 方法数据
Request.ServerVariables 集合读取服务器端环境变量

req.param获取pathinfo中参数 /api/users/{id}req.query获取查询参数 /api/users?name=wwxreq.body获取form提交参数

req与res的知识](http://i5ting.github.io/node-http/#10601))

jQuery 过渡效果

函数
$(selector).hide()：隐藏被选元素
$(selector).show()：显示被选元素
$(selector).toggle()：切换（在隐藏与显示之间）被选元素
$(selector).slideDown()：向下滑动（显示）被选元素
$(selector).slideUp()：向上滑动（隐藏）被选元素
$(selector).slideToggle()：对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()：淡入被选元素
$(selector).fadeOut()：淡出被选元素
$(selector).fadeTo()：把被选元素淡出为给定的不透明度
$(selector).animate()：对被选元素执行自定义动画

a标签添加点击事件但是不发生页面跳转和刷新

href="javascritp:void(0);"

**获取$(this)子节点对象的方法：find(element) **

      $("#desktop a ").each(function(index){
         var imgurl=$(this).find('img').attr('src');
         alert(imgurl);
        }