这篇博客介绍了使用MongoDB作为数据库，Socket.io进行实时通信，async库处理异步操作，JWT实现基于token的鉴权，Express作为web开发框架，Webpack进行模块打包，ES6和Sass提升开发效率，以及React构建前端应用的过程。博主分享了每个技术的具体用法，包括MongoDB的安装和使用、Socket.io的事件监听、async库中的流程控制、JWT的生成与验证、Express的路由处理、Webpack的配置以及React的PureComponent和Dumb组件的概念。博客旨在帮助开发者了解如何将这些技术集成到一个实际项目中。
最近在github上学习一个前端项目
主要是利用 React / Node 实现的应用，代码虽然不难，但涉及的东西很多，所以我把我最近学到的东西，作为笔记写在这里，供我以后使用，或者大家参考，有什么问题还请大佬指点
主要是利用 React / Node 实现的应用，代码虽然不难，但涉及的东西很多，所以我把我最近学到的东西，作为笔记写在这里，供我以后使用，或者大家参考，有什么问题还请大佬指点~~~
MongoDB
- 安装
安装其实不难，就是现在有点卡，附上官网机票：
或者我的百度云盘
链接：
密码：0e3u
还有GUI下载，可以直接窗口查看数据，不用命令行
链接：
密码：mj0l
英文文档
当然还有中文翻译文档mongoose文档 当然还有中文翻译文档
链接：
密码：idl7
或者你可以去菜鸟教程上学习，机票：
- 使用
在安装完成后，你需要在你的安装目录下，新建(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
如果你出现服务器名无效的话，有以下解决方案：
- 你使用不得管理员cmd，请切换cmd
- 将你之前的服务停止并且完全删干净（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"值，来确保集合里面每个文档都能被唯一标识。
http://socke.io
一.http://Socket.IO的介绍Socket.IO一.Socket.IO的介绍
http://Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定。
- 实时分析：将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。
- 实时通信和聊天：只需几行代码便可写成一个http://Socket.IO的”Hello,World”聊天应用。
- 二进制流传输：从1.0版本开始，http://Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。
- 文档合并：允许多个用户同时编辑一个文档，并且能够看到每个用户做出的修改。
官方上提供了2个demo：多人聊天室、多人玩游戏。大家可以去官网试一试。
客户端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')将其过滤出来。
另外，http://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
最低0.47元/天 解锁文章
扫一扫
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
