Node.js实现PC端类微信聊天软件

Posted 2022-03-09 secoding

Github StackChat

学习回顾

React和Electron结合

TypeError: fs.existsSync is not a function

在React组件里引入electron时候就会报这个错，主要原因是在React里不能引入Node.js的模块

解决方法

1. 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
    

1. 预编译引入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>

1. 直接使用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)
      
    )