基于React,Redux以及wilddog的聊天室简单实现
本文主要是使用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的代码,首先是消息列表:
<List className="msgList" ref="msgList"> <Subheader>Chat</Subheader> { _msgList.map((msg,index)=> <section key = {index} ref="msgItem"> <ListItem leftAvatar = {<Avatar src={require('./files/avatar.png')} />} primaryText = {moment(msg.date).format('YYYY-MM-DD HH:mm:ss')} secondaryText={ <p> {msg.msg} </p> } secondaryTextLines={1}/> <Divider inset={true} /> </section> ) } </List>
循环_msgList来输出每一条消息,这里用到List,ListItem是material-ui中的。这个_msgList是从store中取出的:
const { msgs } = this.props; let _msgList = []; for(let i in msgs){ _msgList.push(msgs[i]); }
接下来是输入框和say按钮部分的代码:
<div className="post">
<form onSubmit={this.handleSubmit.bind(this)}> <TextField ref="input" className="input-sec" underlineStyle={inputStyles.underlineStyle} hintText="Say something.." onChange={this.handleChange} value={this.state.input} /> <RaisedButton label="Say" className="postBtn" type="submit"/> </form> </div>
可以看到是主要是一个表单提交的工作,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
基于React,Redux以及wilddog的聊天室简单实现的更多相关文章
- Android基于XMPP Smack openfire 开发的聊天室
Android基于XMPP Smack openfire 开发的聊天室(一)[会议服务.聊天室列表.加入] http://blog.csdn.net/lnb333666/article/details ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 基于WebSocket和SpringBoot的群聊天室
引入 普通请求-响应方式:例如Servlet中HttpServletRequest和HttpServletResponse相互配合先接受请求.解析数据,再发出响应,处理完成后连接便断开了,没有数据的实 ...
- Java进阶:基于TCP通信的网络实时聊天室
目录 开门见山 一.数据结构Map 二.保证线程安全 三.群聊核心方法 四.聊天室具体设计 0.用户登录服务器 1.查看当前上线用户 2.群聊 3.私信 4.退出当前聊天状态 5.离线 6.查看帮助 ...
- C 基于UDP实现一个简易的聊天室
引言 本文是围绕Linux udp api 构建一个简易的多人聊天室.重点看思路,帮助我们加深 对udp开发中一些api了解.相对而言udp socket开发相比tcp socket开发注意的细节要少 ...
- 基于Websocket开发的仿微信聊天室
一.运行环境及涉及技术:----------------------------------* Visual Studio 2019* SQL SERVER 2008 R2* .Net FrameWo ...
- Python基于Socket实现简易多人聊天室
前言 套接字(Sockets)是双向通信信道的端点. 套接字可以在一个进程内,在同一机器上的进程之间,或者在不同主机的进程之间进行通信,主机可以是任何一台有连接互联网的机器. 套接字可以通过多种不同的 ...
- Socket.IO聊天室~简单实用
小编心语:大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐!!这一次要分享的东西小编也不是很懂啊,总之小编把它拿出来是觉地比较稀奇,而且程序也没有那么难,是一个比较简单的程序,大家可以多多试试~ ...
随机推荐
- windows 7(32/64位)GHO安装指南(U盘制作篇)~
本篇接着上篇的介绍,为同学讲解U盘启动盘的制作.虽然本篇大白菜的官网上也有类似的教程,但是为了完整性,我将在这里为大家细细的讲解.在这里说一下,系统包和软件包的下载大家可以自行下载,很简单的,小主就不 ...
- 在树莓派Raspbian下安装支持Hard Float的.NET环境
[题外话] 最近入了个树莓派玩,系统装的官方推荐的Hard Float的Raspbian,由于衍生自Debian,所以Mono什么的非常好装.但是官方源中的Mono在Hard Float的Raspbi ...
- Mono 4.0 Mac上运行asp.net mvc 5.2.3
Mono 4.0 已经发布,二进制包已经准备好,具体的发布说明参见:http://www.mono-project.com/docs/about-mono/releases/4.0.0/. 今天在Ma ...
- Spark笔记:RDD基本操作(上)
本文主要是讲解spark里RDD的基础操作.RDD是spark特有的数据模型,谈到RDD就会提到什么弹性分布式数据集,什么有向无环图,本文暂时不去展开这些高深概念,在阅读本文时候,大家可以就把RDD当 ...
- What is Away3D
做了几个基于Flash平台的3D的项目,一路走来收获颇多.Away3D作为一个开源的Flash3D引擎,在3D页游领域,无疑是当前OGRE在国内的地位. 翻译出了多年前做Away3D中国社区的时候翻译 ...
- Windows 2008 - 由于管理员设置的策略,该磁盘处于脱机状态
http://blog.sina.com.cn/s/blog_59cc90640102x8m4.html 查看原文:https://www.bxl.me/9279.html准备使用云主机挂机的时候呢出 ...
- ABP教程-对Person信息进行操作
这一章的功能比较简单.下面开始 修改视图 对person的视图文件进行修改 <div class="row"> <div class="col-md-1 ...
- 将一句话里的单词进行倒置,标点符号不倒换。比如将“I come from Shanghai.”倒换后变为“Shanghai. from come I”
string str = "I come from Shanghai."; //根据空格切割 string[] strS = str.Split(' '); string temp ...
- C# 云端-让http自动跳转到https链接
在项目的web.config下面加上下面的配置: <rewrite> <rules> <clear /> <rule name="Redirect ...
- 事件EVENT与waitforsingleobject的使用
事件event与waitforsingleobject的配合使用,能够解决很多同步问题,也可以在数据达到某个状态时启动另一个线程的执行,如报警. event的几个函数: 1.CreateEvent和O ...