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

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)
      }
    })
}

原文地址:https://www.cnblogs.com/secoding/p/11122986.html

时间: 2024-10-09 21:23:37

Node.js实现PC端类微信聊天软件(四)的相关文章

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

Github StackChat 技术栈 写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写 Electron React Material-UI React-Router Redux Express Socket.io MongoDB 现在已完成前端大部分界面的构建(无状态),所以记录一下 环境搭建 Create-React-App 利用React脚手架Create-React-App,再写入依赖

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

Github StackChat Redux学习回顾 Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适 Redux主要提供三个东西来进行状态管理 1. Action 表达要进行的动作,也就是通过view层触发,来进行派发来改变全局state action创建函数 也就是只返回一个action的函数 export const SignUpEmailChange = (value) => ({ type: 'SIGNUP_EMAIL

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

Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router --save-dev 路由配置 react-router主要提供了几个组件来进行路由之间结构的组织 Router 所有路由组件的根 Route 路由组件 path属性 匹配路径 component属性 匹配路径渲染的组件 IndexRoute 配置默认页面 component 渲染的组件 React.r

Node.js系列:Buffer类的使用

客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buffer中存的数据默认为16进制. 1.创建Buffer对象 在Node.js中,Buffer类是一个可以在任何模块中不使用的全局类,不要单独加载.可以使用New关键字来创建该类的实例对象. Buffer类有三种形式的构造函数: 第一种:将缓存区大小(以字节为单位)作为构造函数的参数 var size

react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单.发送消息.表情(动图),图片.视频预览,浏览器截图粘贴发送等功能. 二.技术选型 MVVM框架:react / react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具

基于Node.js + socket.io实现WebSocket的聊天DEMO

原文摘自我的前端博客,欢迎大家来访问 http://hacke2.github.io 简介 最近看Node.js和HTML5,练手了一个简易版的聊天DEMO,娱乐一下 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一, 为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验, 于是socket.io诞生. 简答来说socket.io具体以下特点: 1.socket.io设计的目标是支持任何的浏览器

WebSocket+node.js创建即时通信的Web聊天服务器

1.使用nodejs-websocket nodejs-websocket是基于node.js编写的一个后端实现websocket协议的库, 连接:https://github.com/sitegui/nodejs-websocket. (1)安装 在项目目录下通过npm安装:npm install nodejs-websocket (2)创建服务器 //引入nodejs-websocket var ws = require("nodejs-websocket"); //调用creat

js实现PC端与客户端自适应

我们可以通过js来判断页面对象进行显示, 在外部引入css设定ID 1 <link rel="stylesheet" id="css" type="text/css" href="css/pc.css"/> js代码如下 var newDoc=document.open("text/html","replace"); //重新加载引入 window.onload=functi

js判断PC端还是手机端

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "手机版网址"; } else { window.location.href = "PC端网址"; }   原文地址:https://www.cnblogs.com/go-wandering/p/8658566.html