Node.js实现PC端类微信聊天软件(四)
学习回顾
React和Electron结合
TypeError: fs.existsSync is not a function
在React组件里引入electron时候就会报这个错,主要原因是在React里不能引入Node.js的模块
解决方法
- Webpack target属性
先展开Create-React-App所有配置
npm run eject
在webpack.config.js下添加配置
// other configs...
module.exports = function(webpackEnv) {
// some configs
return {
target: 'electron-renderer', // 添加target
// other configs
}
}
- 预编译引入electron
在electron主进程创建窗口时加入属性
win = new BrowserWindow({
width: 1150,
height: 580,
webPreferences: {
preload: __dirname + '/renderer.js'
}
});
在renderer.js里加入
global.electron = require('electron')
在index.html引入
<script>require('./renderer.js')</script>
- 直接使用window引入
const electron = window.require('electron')
combineReducers的使用
import { combineReducers } from 'redux'
combineReducers函数的参数是若干个拆分完的reducer片段
export default combineReducers({
register: registerChange,
login: loginInfoChange,
})
在使用了combineReducers,state就会根据combineReducers的参数进行合并,上面的结合完的state就会变成
state = {
register: {
...
},
login: {
...
}
}
各自内部的结构就根据每个子Reducer的初始state来决定
//loginInfoChange的初始状态
const initialState = {
email: '',
password: '',
}
这样state就会被合并为
state = {
register: {
...
},
login: {
email: '',
password: '',
}
}
mongoDB操作
根据MongoDB node.js Driver的文档来看,提供了callback和promise两种方法,妥妥选择promise
Promise
promise提供了异步编程的新方法
总的来说promise本身就是一个异步操作,但它提供了更优雅的方式来控制异步
创建promise对象
new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
then方法接收resolved状态的回调函数
promise.then(function(value) {
// success
}, function(error) {
// failure
});
可以接受两个参数来接收resolve状态和reject状态,一般只指定resolve状态
链式then,then方法里如果是一个函数,则将返回值作为下一个then调用的参数,还可以是promise对象,这时后一个回调函数,就会等待该Promise对象的状态发生变化
mongonConnect
.then(db => checkRepeatEmail(db, user.email))
.then((db) => {
addUser(db, user)
response.send(SUCCESS_MESSAGE)
})
catch方法,用于接住reject发出时回调函数
mongonConnect
.then(db => checkRepeatEmail(db, user.email))
.then((db) => {
addUser(db, user)
response.send(SUCCESS_MESSAGE)
})
.catch((err) => {
if (err === 'EMAIL_EXISTING') {
response.send(EAMIL_FAILED_MESSAGE)
} else {
response.send(500)
}
})
Coding
跳出登录总结一下
- View发出action
- 通过redux-thunk在action中执行函数
- action中像服务器验证账号
- 服务器返回响应
- 根据响应改变状态
container组件
通过react-redux的connect把方法映射到展示组件上
signInUser: () => {
dispatch(signInUser())
},
action
通过中间件在action中执行函数,来向服务器发送请求再根据服务器响应来分发状态
export const signInUser = () => (dispatch, getState) => {
const email = getState().login.email
const password = getState().login.password
fetchSignIn(email, password)
.then((response) => {
if (response.status === 200) {
const path = '/home'
browserHistory.push(path)
dispatch(signInSuccess())
} else if (response.status === 400) {
dialog.showMessageBox({
title: '提示',
message: response.message,
})
dispatch(signInFail())
}
})
}
服务器端
向数据层验证数据之后返回响应
function signinForUser(user, response) {
const email = user.email
const password = user.password
mongonConnect
.then(db => verifyPassword(db, email, password))
.then((message) => {
if (message === SIGNIN_SUCCESS) {
response.send(SIGNIN_SUCCESS_MESSAGE)
}
})
.catch((message) => {
if (message === USER_NO_EXIST) {
response.send(USER_NO_EXIST_MESSAGE)
} else if (message === PASSWORD_ERROR) {
response.send(PASSWORD_ERROR_MESSAGE)
}
})
}
Node.js实现PC端类微信聊天软件(四)的更多相关文章
- Node.js实现PC端类微信聊天软件(一)
Github StackChat 技术栈 写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写 Elec ...
- Node.js实现PC端类微信聊天软件(五)
Github StackChat 学习回顾 Socket.io 结合Express创建Socket.io服务器 const app = require('express')() const http ...
- Node.js实现PC端类微信聊天软件(二)
Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router -- ...
- Node.js实现PC端类微信聊天软件(三)
Github StackChat Redux学习回顾 Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适 Redux主要提供三个东西来 ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- Node.js系列:Buffer类的使用
客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...
- Node.js之使用Buffer类处理二进制数据
Node.js之使用Buffer类处理二进制数据 Buffer类可以在处理TCP流或文件流时处理二进制数据,该类用来创建一个专门存放二进制数据的缓存区. 1. 创建Buffer对象 1.1 直接创建: ...
- react网页版聊天|仿微信、微博web版|react+pc端仿微信实例
一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...
- 基于Node.js+socket.IO创建的Web聊天室
这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...
随机推荐
- vue 实战总结
相对angular 和react ,本人比较喜欢vue,现在的工作项目也在用vue,前两个有朋友在问我在使用vue中有没有遇到一些很难解决的问题,一下我也只能说出一两个,所以索性就抽时间总结一下我在项 ...
- 关键字explicit的作用(转)
C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit, 意思是隐藏的,类构造函数默认情况 ...
- hdu1540-Tunnel Warfare-(线段树+二分)
题意:有n个村庄排成一列,相邻的村庄可以通信,炸毁则不可以通信,进行m个操作.3种操作,1.炸毁某村庄:2.修复上一个被炸毁的村庄:3.查询某个村庄能通信的村庄数(自己算一个). 解题:求某个点左边扩 ...
- SparkStreaming消费kafka中数据的方式
有两种:Direct直连方式.Receiver方式 1.Receiver方式: 使用kafka高层次的consumer API来实现,receiver从kafka中获取的数据都保存在spark exc ...
- 项目(二) esp32-cam 网页图像人脸
https://randomnerdtutorials.com/esp32-cam-video-streaming-face-recognition-arduino-ide/ ESP32-CAM Pi ...
- sql server 性能优化的几个专家工具
以下为一个方便的sql server 分析的专家工具 sp_WhoIsActive 提供了方便的文档说明 参考网站 http://whoisactive.com/docs/ dba_BlockTrac ...
- lg4820 书堆
题目链接 题意概述:n本书,在桌子边缘堆放,求最长长度. 首先……我们需要一点初中物理知识来推一下规律. 下图是一本书的情况,一本书时书伸出1/2处于临界状态,显然. 两本书时,把两本书看作整体,则有 ...
- WIFI万能钥匙面试引出上线注意事项
WEB应用上线程序员注意事项: 单元测试 前后端联调 界面和用户体验 DEBUG 性能 SEO 安全性
- Python研究
听说Python是种高级语言,故打算研究一下,看看高级在哪 学习资源:https://www.liaoxuefeng.com/wiki/1016959663602400 由于上面所示的网站对Pytho ...
- Mean Average Precision(mAP),Precision,Recall,Accuracy,F1_score,PR曲线、ROC曲线,AUC值,决定系数R^2 的含义与计算
背景 之前在研究Object Detection的时候,只是知道Precision这个指标,但是mAP(mean Average Precision)具体是如何计算的,暂时还不知道.最近做OD的任 ...