Bootstrap

MongoDB+Socket.io+async+JWT+Express+Webpack+ES6+Sass+React

最近在github上学习一个前端项目

机票 KieSun/Chat-Buy-React

主要是利用 React / Node 实现的应用,代码虽然不难,但涉及的东西很多,所以我把我最近学到的东西,作为笔记写在这里,供我以后使用,或者大家参考,有什么问题还请大佬指点

主要是利用 React / Node 实现的应用,代码虽然不难,但涉及的东西很多,所以我把我最近学到的东西,作为笔记写在这里,供我以后使用,或者大家参考,有什么问题还请大佬指点~~~

MongoDB

  • 安装

安装其实不难,就是现在有点卡,附上官网机票:

MongoDB Download Centerwww.mongodb.com图标

Downloads for win32

Downloads for win32dl.mongodb.org

或者我的百度云盘

链接:

https://pan.baidu.com/s/1hsGR58gpan.baidu.com

密码:0e3u

还有GUI下载,可以直接窗口查看数据,不用命令行

链接:

https://pan.baidu.com/s/1gfPaZ0vpan.baidu.com

密码:mj0l

英文文档

mongoose文档www.nodeclass.com

当然还有中文翻译文档mongoose文档 当然还有中文翻译文档

链接:

https://pan.baidu.com/s/1i4OGDaHpan.baidu.com

密码:idl7

或者你可以去菜鸟教程上学习,机票:

MongoDB 教程 | 菜鸟教程www.runoob.com图标
  • 使用

在安装完成后,你需要在你的安装目录下,新建(ctrl+shift+n)几个文件夹,如下图示

其中mongo.conf配置如下

#数据库路径
dbpath=D:\Mongo\data
#日志输出文件路径
logpath=D:\Mongo\logs\mongo.log
#错误日志采用追加模式
logappend=true
#启用日志文件,默认启用
journal=true
#这个选项可以过滤掉一些无用的日志信息,若需要调试使用请设置为false
quiet=true
#端口号 默认为27017
port=27017 

然后你win+x打开windows powershell(管理员)

cd进入你的安装目录下的bin目录,执行以下命令

./mongod --config 'xxxxx\mongo.conf' 
xxxxx就是你的安装目录,我的目录是D:/Mongo
所以我执行
./mongod --config 'D:\Mongo\mongo.conf' 
然后打开127.0.0.1:27017
你会看到一段英文的话,就开启成功了
下面教下免去这种麻烦的启动方式
./mongod --config 'D:\Mongo\mongo.conf' --install --serviceName 'MongoDB'
net satrt MongoDB

如果你出现服务器名无效的话,有以下解决方案:

  1. 你使用不得管理员cmd,请切换cmd
  2. 将你之前的服务停止并且完全删干净(windows下使用sc命令)。确保你下载的mongodb和系统位数匹配请务必使用“管理员权限”打开cmd命令行,然后输入:
D:\Mongo\bin\mongod.exe --dbpath "D:\Mongo\db" --logpath "D:\Mongo\db\db.log" --install --serviceName "mongo" --logappend --directoryperdb
  • 语法

创建数据库的语法格式如下:

use DATABASE_NAME

删除数据库的语法格式如下:

db.dropDatabase()

使用 insert() 或 save() 方法向集合中插入文档,语法如下:

db.COLLECTION_NAME.insert(document)

更新已存在的文档。语法格式如下:

db.collection.update(
   <query>,
   <update>,
   {
     upsert: <boolean>,
     multi: <boolean>,
     writeConcern: <document>
   }
)

参数说明:

  • query : update的查询条件,类似sql update查询内where后面的。
  • update : update的对象和一些更新的操作符(如$,$inc...)等,也可以理解为sql update查询内set后面的
  • upsert : 可选,这个参数的意思是,如果不存在update的记录,是否插入objNew,true为插入,默认是false,不插入。
  • multi : 可选,mongodb 默认是false,只更新找到的第一条记录,如果这个参数为true,就把按条件查出来多条记录全部更新。
  • writeConcern :可选,抛出异常的级别。

删除文档

db.collection.remove(
   <query>,
   {
     justOne: <boolean>,
     writeConcern: <document>
   }
)

参数说明:

  • query :(可选)删除的文档的条件。
  • justOne : (可选)如果设为 true 或 1,则只删除一个文档。
  • writeConcern :(可选)抛出异常的级别。

查询数据的语法格式如下:

db.collection.find(query, projection)
  • query :可选,使用查询操作符指定查询条件
  • projection :可选,使用投影操作符指定返回的键。查询时返回文档中所有键值, 只需省略该参数即可(默认省略)。

如果你需要以易读的方式来读取数据,可以使用 pretty() 方法,语法格式如下:

>db.col.find().pretty()

pretty() 方法以格式化的方式来显示所有文档。

条件操作符有:

  • (>) 大于 - $gt
  • (<) 小于 - $lt
  • (>=) 大于等于 - $gte
  • (<= ) 小于等于 - $lte

limit()方法基本语法如下所示:

>db.COLLECTION_NAME.find().limit(NUMBER)

sort()方法基本语法如下所示:

>db.COLLECTION_NAME.find().sort({KEY:1})

ensureIndex() 方法来创建索引。

>db.COLLECTION_NAME.ensureIndex({KEY:1})

语法中 Key 值为你要创建的索引字段,1为指定按升序创建索引,如果你想按降序来创建索引指定为-1即可。

MongoDB 的对象 Id(ObjectId)。

ObjectId 是一个12字节 BSON 类型数据,有以下格式:

  • 前4个字节表示时间戳
  • 接下来的3个字节是机器标识码
  • 紧接的两个字节由进程id组成(PID)
  • 最后三个字节是随机数。

MongoDB中存储的文档必须有一个"_id"键。这个键的值可以是任何类型的,默认是个ObjectId对象。

在一个集合里面,每个文档都有唯一的"_id"值,来确保集合里面每个文档都能被唯一标识。


socke.io

Socket.IOsocket.io

一.Socket.IO的介绍Socket.IO一.Socket.IO的介绍

Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作,可靠性和速度同样稳定。

  • 实时分析:将数据推送到客户端,这些客户端会被表示为实时计数器,图表或日志客户。
  • 实时通信和聊天:只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
  • 二进制流传输:从1.0版本开始,Socket.IO支持任何形式的二进制文件传输,例如:图片,视频,音频等。
  • 文档合并:允许多个用户同时编辑一个文档,并且能够看到每个用户做出的修改。

官方上提供了2个demo:多人聊天室、多人玩游戏。大家可以去官网试一试。

Socket.IO - Chatsocket.io
Socket.IO - Whiteboardsocket.io

客户端socket.on()监听的事件:Socket.IO - Chat客户端socket.on()监听的事件:

  • 连接:

connect:连接成功
connecting:正在连接
disconnect:断开连接

  • 失败
    connect_failed:连接失败
    error:错误发生,并且无法被其他事件类型所处理
    message:同服务器端message事件
    anything:同服务器端anything事件
  • 重连
    reconnect_failed:重连失败
    reconnect:成功重连
    reconnecting:正在重连
  • 第一次连接,事件触发顺序
    connecting->connect;当失去连接时,事件触发顺序为:disconnect->reconnecting(可能进行多次)->connecting->reconnect->connect。

服务端

io.on('connection',function(socket));//监听客户端连接,回调函数会传递本次连接的socket
io.sockets.emit('String',data);//给所有客户端广播消息
io.sockets.socket(socketid).emit('String', data);//给指定的客户端发送消息
socket.on('String',function(data));//监听客户端发送的信息
socket.emit('String', data);//给该socket的客户端发送消息


广播消息

//给除了自己以外的客户端广播消息
socket.broadcast.emit("msg",{data:"hello,everyone"}); 
//给所有客户端广播消息
io.sockets.emit("msg",{data:"hello,all"});


分组

socket.on('group1', function (data) {
        socket.join('group1');
});
socket.on('group2',function(data){
        socket.join('group2');
 });

客户端发送

socket.emit('group1'),就可以加入group1分组;
socket.emit('group2'),就可以加入group2分组;

一个客户端可以存在多个分组(订阅模式)

踢出分组

socket.leave(data.room);

对分组中的用户发送信息

//不包括自己
socket.broadcast.to('group1').emit('event_name', data);
//包括自己
io.sockets.in('group1').emit('event_name', data);
broadcast方法允许当前socket client不在该分组内

获取连接的客户端socket

io.sockets.clients().forEach(function (socket) {
    //.....
})


获取分组信息

//获取所有房间(分组)信息 io.sockets.manager.rooms
//来获取此socketid进入的房间信息 io.sockets.manager.roomClients[socket.id]
//获取particular room中的客户端,返回所有在此房间的socket实例
io.sockets.clients('particular room')


另一种分组方式

io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('event_name',{});
    });
});

客户端

var socket = io.connect('ws://103.31.201.154:5555/some')
socket.on('even_name',function(data){
   console.log(data);
})

客户端都链接到ws://103.31.201.154:5555 但是服务端可以通过io.of('/some')将其过滤出来。


另外,Socket.IO提供了4个配置的API:io.configure, io.set, io.enable, io.disable。其中io.set对单项进行设置,io.enable和io.disable用于单项设置布尔型的配置。io.configure可以让你对不同的生产环境(如devlopment,test等等)配置不同的参数。

2. 客户端

建立一个socket连接

var socket = io("ws://103.31.201.154:5555");

监听服务消息

socket.on('msg',function(data){
    socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息
    console.log(data);
});
socket.on("Stri
;