成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

基于React,Redux以及wilddog的聊天室簡(jiǎn)單實(shí)現(xiàn)

DevYK / 334人閱讀

摘要：本文主要是使用和來(lái)實(shí)現(xiàn)一個(gè)聊天功能的頁(yè)面，頁(yè)面極其簡(jiǎn)單。具體關(guān)于的介紹，戳這里。只是一個(gè)簡(jiǎn)單的表示操作動(dòng)作的對(duì)象。很顯然，除了是簡(jiǎn)單的對(duì)象之外，還有兩個(gè)相對(duì)復(fù)雜的函數(shù)。而則是將新的消息推到上。頁(yè)面主體的組件。

本文主要是使用ReactJs和Redux來(lái)實(shí)現(xiàn)一個(gè)聊天功能的頁(yè)面，頁(yè)面極其簡(jiǎn)單。使用React時(shí)間不長(zhǎng)，還是個(gè)noob，有不對(duì)之處歡迎大家吐槽指正。

還要指出這里沒(méi)有使用到websocket等技術(shù)來(lái)實(shí)現(xiàn)后端邏輯，而是使用了wilddog充當(dāng)后端。具體關(guān)于wilddog的介紹，戳這里。

目標(biāo)：我期望的頁(yè)面長(zhǎng)這樣，一個(gè)簡(jiǎn)單的消息列表，下面有個(gè)輸入框和提交按鈕，任何人可以在上面說(shuō)話(huà)，并可以看到別人說(shuō)的話(huà)，就這么簡(jiǎn)單。

1. React和Redux

React這么火，我就不多說(shuō)了。Redux是一個(gè)類(lèi)flux的應(yīng)用框架，和flux一樣是單向數(shù)據(jù)流，目前用來(lái)主要是對(duì)flux進(jìn)行了一些優(yōu)化，如將action變?yōu)楹?jiǎn)單的對(duì)象，store也是一個(gè)簡(jiǎn)單的對(duì)象樹(shù)，引入了reducer來(lái)處理action，reducer本身是pure function，調(diào)試起來(lái)也極為方便，還可以配合使用hot-loader以及redux-dev-tool實(shí)現(xiàn)time travel調(diào)試功能，用起來(lái)還是有點(diǎn)爽爽的感覺(jué)。

2. 開(kāi)始coding

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

文件目錄是這樣的：

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

這里主要關(guān)注src下面的內(nèi)容：

store創(chuàng)建一個(gè)唯一的store，存放項(xiàng)目中所有的數(shù)據(jù)。

reducers: 初始化store的部分內(nèi)容，在這里是個(gè)空對(duì)象。還有處理store的函數(shù)，這里只有一個(gè)init的工作，就是用action中傳過(guò)來(lái)的chats字段替換當(dāng)前的state，這里的業(yè)務(wù)邏輯對(duì)應(yīng)的是，每當(dāng)聊天室有新的消息傳過(guò)來(lái)，都會(huì)整個(gè)替換當(dāng)前的聊天內(nèi)容，這里可能會(huì)有疑問(wèn)為什么要這樣，主要是因?yàn)閣ilddog傳給我的就是一個(gè)完整的列表，后面仔細(xì)會(huì)介紹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 : 只是一個(gè)簡(jiǎn)單的表示操作動(dòng)作的對(duì)象。

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是簡(jiǎn)單的對(duì)象之外，還有兩個(gè)相對(duì)復(fù)雜的函數(shù)。這里用到redux-thunk，其作用就是把一些比較復(fù)雜的動(dòng)作(例如這里用到的異步操作)封裝到一個(gè)action中去，redux-thunk是redux的一個(gè)middleware，redux的dispatch無(wú)法處理對(duì)象之外的內(nèi)容，例如函數(shù)，將redux-thunk放進(jìn)去了就可以了：

import thunkMiddleware from "redux-thunk";

const createStoreWithMiddleware = compose(

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

)(createStore);

這里的getChats()首先新建了一個(gè)wilddog實(shí)例，連接我在wilddog上定義好的項(xiàng)目上，

野狗提供的on()函數(shù)可以通過(guò)websocket來(lái)監(jiān)聽(tīng)數(shù)據(jù)是否發(fā)生了變化，正如這里寫(xiě)的，每當(dāng)數(shù)據(jù)發(fā)生變化都會(huì)dispatch一次init動(dòng)作，來(lái)將頁(yè)面的數(shù)據(jù)重新渲染。
而postMsg則是將新的消息推到wilddog上。這樣會(huì)出發(fā)wilddog的數(shù)據(jù)變化，然后反過(guò)來(lái)會(huì)觸發(fā)我們之前定義在on()回調(diào)里面的內(nèi)容，及重新獲取數(shù)據(jù)，渲染頁(yè)面。

container/chat.js: 頁(yè)面主體的react組件。首先將這個(gè)react組件和redux的store關(guān)聯(lián)起來(lái)，這里用到的react-redux中的connect函數(shù)，在注解里完成了：

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

)

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

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

讓我們來(lái)關(guān)注頁(yè)面html的代碼，首先是消息列表：


         Chat

         {
             _msgList.map((msg,index)=>
                 

                 }
                     primaryText = {moment(msg.date).format("YYYY-MM-DD HH:mm:ss")}
                     secondaryText={
                     

                       {msg.msg}
                     

                     }
                     secondaryTextLines={1}/>
                 
                 

             )
         }

循環(huán)_msgList來(lái)輸出每一條消息，這里用到List,ListItem是material-ui中的。這個(gè)_msgList是從store中取出的：

const { msgs } = this.props;

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

接下來(lái)是輸入框和say按鈕部分的代碼：

可以看到是主要是一個(gè)表單提交的工作，handleSubmit即表單提交的函數(shù)：

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，調(diào)用的是之前定義在action中的postMsg函數(shù)完成新增消息的操做。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87728.html

相關(guān)文章

  • 基于react+react-router+redux+socket.io+koa開(kāi)發(fā)一個(gè)聊天室

    摘要：最近練手開(kāi)發(fā)了一個(gè)項(xiàng)目，是一個(gè)聊天室應(yīng)用。由于我們的項(xiàng)目是一個(gè)單頁(yè)面應(yīng)用，因此只需要統(tǒng)一打包出一個(gè)和一個(gè)。而就是基于實(shí)現(xiàn)的一套基于事件訂閱與發(fā)布的通信庫(kù)。比如說(shuō)，某一個(gè)端口了，而如果端口訂閱了，那么在端，對(duì)應(yīng)的回調(diào)函數(shù)就會(huì)被執(zhí)行。 最近練手開(kāi)發(fā)了一個(gè)項(xiàng)目，是一個(gè)聊天室應(yīng)用。項(xiàng)目雖不大，但是使用到了react, react-router, redux, socket.io，后端開(kāi)發(fā)使用了...

    NusterCache 評(píng)論0 收藏0

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開(kāi)源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開(kāi)發(fā)框架實(shí)用庫(kù)開(kāi)發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...

    Olivia 評(píng)論0 收藏0

  • 一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

    摘要：利用中間件實(shí)現(xiàn)異步請(qǐng)求，實(shí)現(xiàn)兩個(gè)用戶(hù)角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會(huì)寫(xiě)更多的前后臺(tái)聯(lián)通的項(xiàng)目。刪除分組會(huì)連同組內(nèi)的所有圖片一起刪除。算是對(duì)自己上次用寫(xiě)后臺(tái)的一個(gè)強(qiáng)化，項(xiàng)目文章在這里。后來(lái)一直沒(méi)動(dòng)，前些日子才把后續(xù)的完善。 歡迎訪(fǎng)問(wèn)我的個(gè)人網(wǎng)站：http://www.neroht.com/? 剛學(xué)vue和react時(shí)，利用業(yè)余時(shí)間寫(xiě)的關(guān)于這兩個(gè)框架的訓(xùn)練，都相對(duì)簡(jiǎn)單，有的...

    tangr206 評(píng)論0 收藏0

  • node技術(shù)棧 - 收藏集 - 掘金

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

    王偉廷 評(píng)論0 收藏0

  • 前端每周清單半年盤(pán)點(diǎn)之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤(pán)點(diǎn)之與篇前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開(kāi)發(fā)者的討論。 前端每周清單半年盤(pán)點(diǎn)之 React 與 ReactNative 篇 前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為...

    Barry_Ng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<