基于React,Redux以及wilddog的聊天室簡單實現

DevYK 發布于2019-08-21 13:37 / 330人閱讀

摘要：本文主要是使用和來實現一個聊天功能的頁面，頁面極其簡單。具體關于的介紹，戳這里。只是一個簡單的表示操作動作的對象。很顯然，除了是簡單的對象之外，還有兩個相對復雜的函數。而則是將新的消息推到上。頁面主體的組件。

本文主要是使用ReactJs和Redux來實現一個聊天功能的頁面，頁面極其簡單。使用React時間不長，還是個noob，有不對之處歡迎大家吐槽指正。

還要指出這里沒有使用到websocket等技術來實現后端邏輯，而是使用了wilddog充當后端。具體關于wilddog的介紹，戳這里。

目標：我期望的頁面長這樣，一個簡單的消息列表，下面有個輸入框和提交按鈕，任何人可以在上面說話，并可以看到別人說的話，就這么簡單。

1. React和Redux

React這么火，我就不多說了。Redux是一個類flux的應用框架，和flux一樣是單向數據流，目前用來主要是對flux進行了一些優化，如將action變為簡單的對象，store也是一個簡單的對象樹，引入了reducer來處理action，reducer本身是pure function，調試起來也極為方便，還可以配合使用hot-loader以及redux-dev-tool實現time travel調試功能，用起來還是有點爽爽的感覺。

2. 開始coding

"不想看扯淡，只要看源碼的"戳這里:D。

文件目錄是這樣的：

項目是使用webpack打包的，也用了dev-server，有興趣的同學可以自己看webpack目錄和server.js。

這里主要關注src下面的內容：

store創建一個唯一的store，存放項目中所有的數據。

reducers: 初始化store的部分內容，在這里是個空對象。還有處理store的函數，這里只有一個init的工作，就是用action中傳過來的chats字段替換當前的state，這里的業務邏輯對應的是，每當聊天室有新的消息傳過來，都會整個替換當前的聊天內容，這里可能會有疑問為什么要這樣，主要是因為wilddog傳給我的就是一個完整的列表，后面仔細會介紹wilddog。

const initialState = {

};
export function chat(state = initialState, action) {

 switch (action.type) {

     case INIT_CHAT:
         return Object.assign({},state,action.chats);

     default:
         return state;
 }

}

action : 只是一個簡單的表示操作動作的對象。

export function init(chats){
 return {
     type : INIT_CHAT,
     chats
 }

}

export function getChats(){

   return function(dispatch){
       ref = new Wilddog("https://firstblood.wilddogio.com/");
       ref.on("value", function(snapshot) {
           console.log(snapshot.val());
           dispatch(init(snapshot.val()));
       }, function (errorObject) {
           console.log("The read failed: " + errorObject.code);
       });
   }

}

export function postMsg(msg){

   return function(dispatch){
       var postsRef = ref.child("msgs");
       postsRef.push({
           date: Date.now(),
           msg
       });
   }

}

很顯然，除了init是簡單的對象之外，還有兩個相對復雜的函數。這里用到redux-thunk，其作用就是把一些比較復雜的動作(例如這里用到的異步操作)封裝到一個action中去，redux-thunk是redux的一個middleware，redux的dispatch無法處理對象之外的內容，例如函數，將redux-thunk放進去了就可以了：

import thunkMiddleware from "redux-thunk";

const createStoreWithMiddleware = compose(

   applyMiddleware(
       thunkMiddleware,
       logger
   ),
   window.devToolsExtension ? window.devToolsExtension() : f => f

)(createStore);

這里的getChats()首先新建了一個wilddog實例，連接我在wilddog上定義好的項目上，

野狗提供的on()函數可以通過websocket來監聽數據是否發生了變化，正如這里寫的，每當數據發生變化都會dispatch一次init動作，來將頁面的數據重新渲染。
而postMsg則是將新的消息推到wilddog上。這樣會出發wilddog的數據變化，然后反過來會觸發我們之前定義在on()回調里面的內容，及重新獲取數據，渲染頁面。

container/chat.js: 頁面主體的react組件。首先將這個react組件和redux的store關聯起來，這里用到的react-redux中的connect函數，在注解里完成了：

@connect(
   state => state.chat,
   dispatch => bindActionCreators(actionCreators, dispatch)

)

大家是否還記得我們之前定義好了獲取頁面初始消息列表的getChats函數，在這里被調用：

componentDidMount(){
       this.props.getChats();
       this.setState({
           input : ""
       });
   }

讓我們來關注頁面html的代碼，首先是消息列表：


         Chat

         {
             _msgList.map((msg,index)=>
                 
                 }
                     primaryText = {moment(msg.date).format("YYYY-MM-DD HH:mm:ss")}
                     secondaryText={
                     
                       {msg.msg}
                     
                     }
                     secondaryTextLines={1}/>
                 
                 
             )
         }

循環_msgList來輸出每一條消息，這里用到List,ListItem是material-ui中的。這個_msgList是從store中取出的：

const { msgs } = this.props;

       let _msgList = [];
       for(let i in msgs){
           _msgList.push(msgs[i]);
       }

接下來是輸入框和say按鈕部分的代碼：

可以看到是主要是一個表單提交的工作，handleSubmit即表單提交的函數：

handleSubmit = (event)=>{
       event.preventDefault();
       if(!this.refs.input.getValue())return;
       this.props.postMsg(this.refs.input.getValue());
       this.refs.main.scrollTop = 10000;
       this.setState({
           input : ""
       });
   };

這里最重要的是this.props.postMsg，調用的是之前定義在action中的postMsg函數完成新增消息的操做。

到目前位置代碼部分就完了，這里可以試試demo，我用的wilddog個人免費版，資源有限，別整掛了:P

云服務器 GPU云服務器 react-redux React_Redux_Appointm react-router-redux 基于webrtc實現一對一聊天

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87728.html

基于react+react-router+redux+socket.io+koa開發一個聊天室

摘要：最近練手開發了一個項目，是一個聊天室應用。由于我們的項目是一個單頁面應用，因此只需要統一打包出一個和一個。而就是基于實現的一套基于事件訂閱與發布的通信庫。比如說，某一個端口了，而如果端口訂閱了，那么在端，對應的回調函數就會被執行。最近練手開發了一個項目，是一個聊天室應用。項目雖不大，但是使用到了react, react-router, redux, socket.io，后端開發使用了...

NusterCache 2019-08-20 14:48 評論0 收藏0
微信小程序資源匯總

awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發框架實用庫開發工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評論0 收藏0
一些基于React、Vue、Node.js、MongoDB技術棧的實踐項目

摘要：利用中間件實現異步請求，實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化，項目文章在這里。后來一直沒動，前些日子才把后續的完善。歡迎訪問我的個人網站：http://www.neroht.com/? 剛學vue和react時，利用業余時間寫的關于這兩個框架的訓練，都相對簡單，有的...

tangr206 2019-06-26 17:34 評論0 收藏0
node技術棧 - 收藏集 - 掘金

摘要：異步最佳實踐避免回調地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術和異步函數。 Nodejs 連接各種數據庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...

王偉廷 2019-06-26 17:15 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0