摘要:本文主要是使用和來實現(xiàn)一個聊天功能的頁面,頁面極其簡單。具體關(guān)于的介紹,戳這里。只是一個簡單的表示操作動作的對象。很顯然,除了是簡單的對象之外,還有兩個相對復(fù)雜的函數(shù)。而則是將新的消息推到上。頁面主體的組件。
本文主要是使用ReactJs和Redux來實現(xiàn)一個聊天功能的頁面,頁面極其簡單。使用React時間不長,還是個noob,有不對之處歡迎大家吐槽指正。
還要指出這里沒有使用到websocket等技術(shù)來實現(xiàn)后端邏輯,而是使用了wilddog充當(dāng)后端。具體關(guān)于wilddog的介紹,戳這里。
目標:我期望的頁面長這樣,一個簡單的消息列表,下面有個輸入框和提交按鈕,任何人可以在上面說話,并可以看到別人說的話,就這么簡單。
1. React和Redux
React這么火,我就不多說了。Redux是一個類flux的應(yīng)用框架,和flux一樣是單向數(shù)據(jù)流,目前用來主要是對flux進行了一些優(yōu)化,如將action變?yōu)楹唵蔚膶ο螅瑂tore也是一個簡單的對象樹,引入了reducer來處理action,reducer本身是pure function,調(diào)試起來也極為方便,還可以配合使用hot-loader以及redux-dev-tool實現(xiàn)time travel調(diào)試功能,用起來還是有點爽爽的感覺。
2. 開始coding
"不想看扯淡,只要看源碼的"戳這里:D。
文件目錄是這樣的:
項目是使用webpack打包的,也用了dev-server,有興趣的同學(xué)可以自己看webpack目錄和server.js。
這里主要關(guān)注src下面的內(nèi)容:
store創(chuàng)建一個唯一的store,存放項目中所有的數(shù)據(jù)。
reducers: 初始化store的部分內(nèi)容,在這里是個空對象。還有處理store的函數(shù),這里只有一個init的工作,就是用action中傳過來的chats字段替換當(dāng)前的state,這里的業(yè)務(wù)邏輯對應(yīng)的是,每當(dāng)聊天室有新的消息傳過來,都會整個替換當(dāng)前的聊天內(nèi)容,這里可能會有疑問為什么要這樣,主要是因為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是簡單的對象之外,還有兩個相對復(fù)雜的函數(shù)。這里用到redux-thunk,其作用就是把一些比較復(fù)雜的動作(例如這里用到的異步操作)封裝到一個action中去,redux-thunk是redux的一個middleware,redux的dispatch無法處理對象之外的內(nèi)容,例如函數(shù),將redux-thunk放進去了就可以了:
import thunkMiddleware from "redux-thunk";
const createStoreWithMiddleware = compose(
applyMiddleware( thunkMiddleware, logger ), window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
這里的getChats()首先新建了一個wilddog實例,連接我在wilddog上定義好的項目上,
野狗提供的on()函數(shù)可以通過websocket來監(jiān)聽數(shù)據(jù)是否發(fā)生了變化,正如這里寫的,每當(dāng)數(shù)據(jù)發(fā)生變化都會dispatch一次init動作,來將頁面的數(shù)據(jù)重新渲染。
而postMsg則是將新的消息推到wilddog上。這樣會出發(fā)wilddog的數(shù)據(jù)變化,然后反過來會觸發(fā)我們之前定義在on()回調(diào)里面的內(nèi)容,及重新獲取數(shù)據(jù),渲染頁面。
container/chat.js: 頁面主體的react組件。首先將這個react組件和redux的store關(guān)聯(lián)起來,這里用到的react-redux中的connect函數(shù),在注解里完成了:
@connect( state => state.chat, dispatch => bindActionCreators(actionCreators, dispatch)
)
大家是否還記得我們之前定義好了獲取頁面初始消息列表的getChats函數(shù),在這里被調(diào)用:
componentDidMount(){ this.props.getChats(); this.setState({ input : "" }); }
讓我們來關(guān)注頁面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來輸出每一條消息,這里用到List,ListItem是material-ui中的。這個_msgList是從store中取出的:
const { msgs } = this.props; let _msgList = []; for(let i in msgs){ _msgList.push(msgs[i]); }
接下來是輸入框和say按鈕部分的代碼:
可以看到是主要是一個表單提交的工作,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個人免費版,資源有限,別整掛了:P
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87728.html
摘要:最近練手開發(fā)了一個項目,是一個聊天室應(yīng)用。由于我們的項目是一個單頁面應(yīng)用,因此只需要統(tǒng)一打包出一個和一個。而就是基于實現(xiàn)的一套基于事件訂閱與發(fā)布的通信庫。比如說,某一個端口了,而如果端口訂閱了,那么在端,對應(yīng)的回調(diào)函數(shù)就會被執(zhí)行。 最近練手開發(fā)了一個項目,是一個聊天室應(yīng)用。項目雖不大,但是使用到了react, react-router, redux, socket.io,后端開發(fā)使用了...
摘要:利用中間件實現(xiàn)異步請求,實現(xiàn)兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯(lián)通的項目。刪除分組會連同組內(nèi)的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化,項目文章在這里。后來一直沒動,前些日子才把后續(xù)的完善。 歡迎訪問我的個人網(wǎng)站:http://www.neroht.com/? 剛學(xué)vue和react時,利用業(yè)余時間寫的關(guān)于這兩個框架的訓(xùn)練,都相對簡單,有的...
摘要:異步最佳實踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字,讀完需 8 分鐘,速讀需 2 分鐘。翻譯自...
摘要:前端每周清單半年盤點之與篇前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日,宣布將的構(gòu)建工具由遷移到,引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為...
閱讀 3791·2023-04-25 21:09
閱讀 3138·2021-10-20 13:48
閱讀 3046·2021-09-24 10:25
閱讀 2945·2021-08-21 14:08
閱讀 1802·2019-08-30 15:56
閱讀 991·2019-08-30 15:52
閱讀 1858·2019-08-29 14:11
閱讀 3575·2019-08-29 11:01