react和websocket的实现实时推送

Author Avatar
Peipei Wong 8月 15, 2018
  • 在其它设备中阅读本文章

刚听到这个需求的时候,好慌…之前没做过,该怎么办?

plan A

我的大脑迅速闪过一个方案:收到信息就在右上方弹出消息块,然后过个五秒,就把自己删除。接着我去查:react如何把自己删除,得到的答案是:移除组件必须是父组件去移除。此计划不行,怎么办?

接着我继续想,不行啊,我得记录之前的消息,要是两秒内来个三条消息,新的就把旧的遮住了…

plan A over了,plan B

此时,我想到了一个package:react-s-alert,这个组件可以满足我的需求呢,但是,我如何自定义我的消息块,只有一个message的选项,可是我的消息块类型有好几种呢,我难道要去拼接字符串?仔细想想,不可以呀,都用react了,得用组件啊,但是看了参数,好像没找到解决办法。仔细想了想,嗯,我要的核心是和它一样的,这样我改改view层,就可以用了,此方法可行。于是我forkclone,开始仔细看源码….

哇,这个组件内部实现了一个迷你的redux,好酷,看不懂呢,我查的时候,看到了一个叫React小书,里面有一部分是主要讲这个的,看了讲解,能稍微看懂了。于是我知道这个组件的内部的大概逻辑。仔细想了想,我是写一个插件块呢还是拼接字符串快呢?目前的阶段先用拼接字符串吧。

项目内部已经使用salert来作为全局的弹框了,我要是还用它来显示消息块,这个组件是使用一个store,这会影响我的消息块的显示!!这个时候,我还在认真的想着怎么去解决这个问题….

终极解决方案

忽然灵机一动,这不就是把东西存到store里面,展示成一个列表嘛!!!唯一多出的东西就是在每个item内部加一个timeout,显示几秒后,移除。这个时候忽然想到这个终极的解决办法的我,真的是!!!

为什么是这样的一个心理活动

仔细分析了我的全部心理活动,为什么这个解决方案如此常见,我没有想到呢!!刚开始一听到实时推送,没听过,听起来很高级呢,很难吧…于是自己把自己吓住了,人在不清醒的状况下,无法正常的思考问题…
于是我开始了一系列的plan,绕了一圈才想到正常的方法。只是当我想到最后的方案时,但是带给我的冲击太大了,就是 乱花渐欲迷人眼, 我的眼睛被迷住了,当清醒的那一刻….

过程还是不错的,我学到了如何构建一个mini的redux,现在需要努力的是:如何在大脑不清醒的状态下进行思考…多玩玩恐怖的密室逃脱

PS: 炒鸡推荐一款游戏 human resource machine,希望我没写错吧,这款的游戏对于我来说是锻炼算法和逻辑能力的,仔细画流程图还是能找到解决办法…解可能不是最优解,去搜搜最优解, 有对比才有爱❤️