基于React,Redux以及wilddog的聊天室简单实现

DevYK 发布于2019-08-21 13:37 / 308人阅读

摘要：本文主要是使用和来实现一个聊天功能的页面，页面极其简单。具体关于的介绍，戳这里。只是一个简单的表示操作动作的对象。很显然，除了是简单的对象之外，还有两个相对复杂的函数。而则是将新的消息推到上。页面主体的组件。

本文主要是使用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实现一对一聊天

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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