使用 React 从头开始构建实时聊天小部件
我正在尝试使用 React.js 和 Node.js 从头开始构建一个实时聊天小部件，并且想知道是否有人知道制作它的任何资源或教程？
我正在尝试制作一个，但我不想使用任何第三方应用程序，因为长期成本（每个人都有免费试用版，但之后每月付费），我很喜欢构建它的指导体验。
任何信息都有帮助！非常感谢您抽出时间。
I am trying to build a Live chat Widget from scratch using React.js and Node.js and was wondering if anyone knows of any resources or tutorials to make it?
I'm trying to do make one but I don't want to use any 3rd party apps because of the long-term cost (everyone has a free trial but it's paid monthly after that) and I would love the guided experience of building it.
Any information helps! Thanks so much for your time.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我建议您从我的关于如何构建 Web 小部件的博客文章系列开始。
这是一个使用 GitHub 存储库的分步完整教程。
您已经知道什么是小部件，因此可以从第 2 部分开始阅读：网络小部件（第 2 部分）：为他添加小部件！
- 如何制作小部件并将其加载到网站。
第 3 部分：Web 小部件（第 3 部分）：API Cookbook
是关于如何为小部件制作 API 的。
奖励部分：Web 小部件（奖励）：为什么选择 iframe？
介绍了将小部件加载到 iframe 中的好处。
如果您的聊天需要 UI 组件，请检查我的 React 聊天库： https://github .com/chatscope/chat-ui-kit-react。
用于在 React 中管理聊天状态的其他有用库是：React headless chat hook。
对于消息传输，您可以使用普通的 websocket，但使用 Socket.io 或 uWebsockets
I recommend you start with my blog article series about how to build a web widget.
This is a step-by-step complete tutorial with GitHub repositories.
You already know what a widget is, so you can start reading from part 2: Web widgets (Part 2): Widget him!
- how to make a widget and load it to the website.
Part 3: Web widgets (Part 3): API Cookbook
is about how to make an API for the widget.
The bonus part: Web widgets (Bonus): Why iframe?
is about the benefits of loading widgets into an iframe.
If you need UI components for your chat, please check my React chat library: https://github.com/chatscope/chat-ui-kit-react.
Additional useful library for managing chat state in react is: React headless chat hook.
For message transport, you can use a plain websocket, but it's less painful to use Socket.io or uWebsockets