V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kyuuseiryuu
V2EX  ›  分享创造

前一段时间在做前端,摸了一个 react-websocket 组件

  •  
  •   kyuuseiryuu · 2017-09-11 14:58:09 +08:00 · 2293 次点击
    这是一个创建于 2633 天前的主题,其中的信息可能已经有所发展或是发生改变。

    GitHub 上也看到有人发过一个酱紫的组件,但是觉得功能少了点。

    然后自己也撸了一个。(也许重复造轮子了?)

    然后,我有了个想法:

    • WebSocket 用 JSON 字符串通信,B、S 端各自 parse。
    • 取 JSON 中某个字段当作方法名,这样是不是可以模拟我们的 URL 中的 controller 信息嘞?

    然后就撸了一个前端的 react-websocket 组件和一个后端 NodeJS 的 websocket-handler。


    react-websocket

    • 支持 自动重连,可设置重连次数和重连延迟。
    • 支持事件 onMessage,onError,onClose
    • 其他回调 onCreate,onRetry,

      onCreate(wraper, websocket) 第一个参数可以获取到 ws 的一个简单包装,只包装了一下 send 方法,可以直接发送 Object,只做了 JSON.stringify 而已。第二个参数就是创建出来的 WebSocket 对象了。

    • 可设置 actionMapping,actionKey,尝试解析消息并调用 actionMapping 里面设置的与 actionKey 同名的方法。

    websocket-handler

    只是简单包装了一下 nodejs-websocket,实现简单的群发,定向发送加和上面那个组件相同的 actionMapping 以及管理连接。(其实就是都放到一个 map 里边)。


    感兴趣的大佬可以来玩一下这个小玩具。

    react-websocket

    websocket-handler

    不求 Star,就想问下,测试咋写啊?感觉别人的项目头上有花花绿绿的图标好帅啊。那个要怎么搞?

    2 条回复    2017-09-16 08:57:30 +08:00
    xcodebuild
        1
    xcodebuild  
       2017-09-12 13:13:47 +08:00   ❤️ 1
    测试的图标的话看这里: https://docs.travis-ci.com/user/status-images/
    kyuuseiryuu
        2
    kyuuseiryuu  
    OP
       2017-09-16 08:57:30 +08:00 via iPhone
    那个,试过的小伙伴可以给点建议吗。好冷清啊,有点想发布到 npm 仓库上,不知道够不够格。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 02:11 · PVG 10:11 · LAX 18:11 · JFK 21:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.