基於react、socket.io、node.js仿微信開發

時間 2019-12-05

標籤基於 react socket.io socket node.js node 微信開發欄目 React 简体版

原文原文鏈接

前言

這個項目是我自學react+redux的第一個項目，並結合本身以前所學的node+mongodb，來模仿開發微信客戶端。利用天天下班時間邊學習邊寫。因爲本人技術水平有限，比較適合新手。目前尚未寫完。喜歡的話能夠幫忙給我github點個star ^_^javascript

項目地址

https://github.com/zhouatie/w...html

技術棧

react+redux+react-router4+socket.io+axios+node.js+mongodbvue

說明

本地啓動mongodb服務
分別進入wechat跟server文件夾npm install
wechat裏npm run start 
server裏node app.js 和 chat.js 這兩個文件

開發環境：macbook pro 、vscode、Chrome、node
若是npm install太慢致使有些npm依賴包下載失敗你能夠看控制檯的報錯信息，再手動npm install 具體的開發包，推薦使用淘寶的註冊源，直接運行java

npm install -g cnpm --registry=https://registry.npm.taobao.orgnode

目標功能

[√] 註冊
[√] 登陸
[√] 添加好友
[√] 支持私聊
[√] 消息列表的展現
[√] 未讀消息數量的顯示
[√] axios數據跨域的設置
[ ] 羣聊
[√] 上傳頭像
[√] 我的信息的編輯
[ ] 朋友圈

部分截圖

總結

1.以前寫vue項目的時候，在main.js文件中寫express接口，就好了，就不存在跨域問題。在create-react-app啓動的靜態資源服務中，實在找不到哪裏能夠寫接口，找了很久的node_modules ，都不知道在哪裏下手。好在create-react-app中的package.json中加上：proxy:http://localhost:4000就能解決跨域問題了。react

2.在app.js頁面中，使用的是express框架，寫socket.io不知道爲何會提醒跨域問題，而我前面的登陸接口用axios跨域就沒有問題，並且我在express的頭部作了CORS處理，仍是存在跨域問題。因此只能另啓了一個node服務，採用原生node.js編寫，跨域就成功了。可是我在新寫的服務中，換成用express框架，結果也提示了存在跨域問題。目前我的猜想express可能有什麼跨域機制。ios

3.在引入react-router4的時候遇到了不少疑難雜症，晚上大部分的react-router4一下的版本。按照網上來作，好多報錯，處處找博客找文章。後來經過react-router英文文檔的閱讀解決了各類報錯問題。git

4.我是經過redux來更新消息列表，中間出現store數據更新了，組件卻不渲染。後來求助好友後，原來是我強制修改了state致使頁面沒法即便刷新。github

5.formdata上傳文件，至關於表單上傳，頭部爲Content-Type:multipart/form-data,這點要注意了！web

注意: Multer 不會處理任何非 multipart/form-data 類型的表單數據。具體見 multer

var multer = require('multer');
var upload = multer({ dest: '../wechat/public/logos' }); // dest 指的是圖片存到哪一個文件夾裏

// 上傳頭像
app.post("/uploadLogo", upload.single("avatar"), (req, res) => {
    User.update({ _id: req.body.id }, { $set: { logo: './logos/' + req.file.filename } }, function () {
        res.send({
            status: "success",
            url: './logos/' + req.file.filename
        })
    })
})