开源 React 实时协作白板先聊聊，为什么做这个项目的原因，国内的云计算公司普遍的一个观点是技术上有壁垒，再加上适当的

基于 Netless 底层的 WhiteBoard SDK 开发了一行代码搞定白板的开源项目，地址在这里 github.com/netless-io/…

先聊聊，为什么做这个项目的原因，国内的云计算公司普遍的一个观点是技术上有壁垒，再加上适当的推广用户就会蜂拥而至，对所谓的底层服务比较重视，对最接近用户的 SDK 反而很潦草的应付，恨不得让公司水平最低的工程师随便写写，好多公司甚至让来公司实习的工程师来写，而最终的结果就是企业的支持成本变高，而客户的接入时间和成本也变高。

恶性循环后，工程师也认为 SDK 是云计算公司里水平最低的职业，大多数人避之而无不及。

当我们在考察了上百个成功的世界级云服务后发现一个共同的特点，他们的接入成本非常低，他们把看起来很 low 的事情做到了极致，仔细想想其中倾注的 SDK 设计能力，化繁为简的技术能力等都是巨大的投入，有些甚至超过了在底层服务上的投入，最终产生良性循环和正反馈，快速的接入，带来客户的快速成功，带来企业营收上涨成本降低。

而这个项目就作为我们对这一理念的深刻认同的结果。

看看效果

<body>
    <div id="app-root"></div>
    <script src="https://sdk.herewhite.com/fast-sdk/index.js"></script>
    <script type="text/javascript">
        var userId = `${Math.floor(Math.random() * 100000)}`;
        var uuid = "8c2ee602f11e4883a75a9be9dd51b4cd";
        var roomToken = "WHITEcGFydG5lcl9pZD0zZHlaZ1BwWUtwWVN2VDVmNGQ4UGI2M2djVGhncENIOXBBeTcmc2lnPWFhODIxMTQ5NjdhZDdmMmVlMzI1NmJhNjUwNmM2OTJmMzFkNGZiODg6YWRtaW5JZD0xNTgmcm9vbUlkPThjMmVlNjAyZjExZTQ4ODNhNzVhOWJlOWRkNTFiNGNkJnRlYW1JZD0yODMmcm9sZT1yb29tJmV4cGlyZV90aW1lPTE2MDA1MTI0OTYmYWs9M2R5WmdQcFlLcFlTdlQ1ZjRkOFBiNjNnY1RoZ3BDSDlwQXk3JmNyZWF0ZV90aW1lPTE1Njg5NTU1NDQmbm9uY2U9MTU2ODk1NTU0NDAwMjAw";
        
        WhiteFastSDK.Room("app-root",{
            uuid: uuid,
            roomToken: roomToken,
            userInf: {
                id: userId,
            },
        });
    </script>
</body>

进一步可以通过配置的方式支持自定义，比如工具条放在左边不顺眼，可以设置

toolBarPosition: "top"

放到上面去。不想要白板，想要黑板?

boardBackgroundColor: "black"

项目是用 typescript + react 编写的，通过 typescript 可以提高大型项目的可维护性，react 的声明编程很适合项目本身根据配置进行布局的特点。

另外本项目还通过引入 Netless 自研的 OOXML 的 Web 渲染引擎支持在浏览器上实现 PPT 的播放，可以方便在会议和教学中更好的引导观众的注意力。

希望这样的一个项目可以给工作中需要互动白板的你带来一丝暖意。