前端聊天功能如何实现_react使用websocket
前端聊天功能如何实现_react使用websocket
chat-room
代码已经上传到 GitHub，如果喜欢，不妨给一个⭐️
说明
本项目灵感来自交大x字节跳动的公开课，样式参考其demo1，但本项目采用React2所写，UI组件使用Antd3
本项目实现的功能有：
- 用户登录
- 用户注册
- 单人聊天
- 多人聊天
- 表情发送
- 文件传输
- 发送语音
- 视频通话
本项目采用的技术有：
-
React & Antd- 开发前端界面
-
Electron- 打包应用程序，本地测试不适用于https，因为证书不被信任
-
nodejs & socket.io & express- 后端逻辑处理
-
WebRTC- 语音聊天，音视频通话
-
sqlite3- 数据库管理，用户注册登录
如何测试本项目
本项目测试所需要的条件根据不同的功能有所不同，主要是因为局域网中视频通话需要使用https，下面进行简单的说明，不保证按照本说明便可以正常运行该项目
简单测试，请直接运行安装包，安装该应用程序，然后进入server下运行
yarn install --production
yarn start运行于http环境
在该条件下，可以运行绝大多数的功能，除发送语音&视频通话 也可以使用安装包进行安装，服务端操作同下
- 进入到客户端目录下(含
package.json)，执行下面的操作
# 建议使用yarn
yarn install --production # 如需打包，运行yarn install
yarn start这个时候，项目应该会在如下网址运行
- 直接在网页中打开，效果如下
- 执行到上面的步骤之后，需要到server目录下执行服务端代码
yarn install --production
yarn start运行完之后，控制台会打印出对应的端口号
此时可以访问http://localhost:3001进行确认服务端是否运行正常，如果页面中出现access success，说明可以访问，服务端正常运行
- 回到第2步，登录进入，如果没有账号密码，可以先注册一个，这里提供几个测试用的账号密码，为了看到效果，可以同时登录多个账号(同一房间) 账号 密码 a a b b c c
- 在聊天成员中选择任意一个，便可以发送信息，对方收到对应信息，如果对方当前聊天对象不是发送对象，那么便会出现红点进行提示
选中一个，才能发送消息~
该条件下只能发送文件，文本信息以及表情
在
http://localhost:3000(非其他局域网ip地址访问网页)条件下，可以使用语音视频功能
运行于https环境
该环境下支持使用所有功能，视频聊天需要使用多个设备(本地两个网页也可)进行测试，在这里说明局域网配置
- 进入server目录，执行下面命令
yarn install --production
yarn https- 使用第二个设备连接到本地电脑的
热点，打开cmd，使用ipconfig查看所有ip地址，使用https://{ip}:3000访问(一定要加https)，选择能够访问到前端的ip地址，假设为ip，打开.env.development，设置为REACT_APP_SOCKET_URL=https://{ip}:3001，使用上面一样的命令运行客户端 - 在第二台设备中打开网页
https://{ip}:3000(之前界面不要关闭，因为自己签发的https证书不受信任，关闭之后可能不能连接到服务端)，然后登录进去；本地亦是如此 进入客户端或者服务端界面的时候都有可能出现下面的情况，请选择advanced中的continue
- 建议在本地端发送数据给第二台设备(视频不太稳定)
演示效果
简单讲解：
作为一个聊天程序，用户之间需要进行聊天，一个是写死对方的地址，然后直接发送消息，另一个就是通过第三方进行消息的中转，我们只需要知道服务端的地址即可，当然，我们也可以通过服务端知道了对方的地址，然后直接进行通信，本项目采用的是服务端中转
文本，文件，语音只不过发送的数据类型不同罢了，socket.io支持二进制文件的发送，那么由它转发即可，不过注意设置好缓冲大小，否则容易断开连接
音视频通话使用WebRTC4，用户A先请求用户B可否进行通话，如果可以，然后在使用RTCPeerConnection进行连接，将stream加到对应的video元素上即可，实际上本项目采用的有两次下面的过程，一次是为了确认用户是否同意，另一次才是实际连接的建立
docker 运行
在client 目录下
docker build -t=chat-client .
docker run -p 3000:3000 --name client chat-client在server 目录下
docker build -t=chat-server .
docker run -p 3001:3001 --name server chat-server创建成功之后，可在本地进行预览
局限
- 本项目数据不进行持久性保存，实时聊天通话，所有消息仅保存在内存中，当然可以实现持久化保存，但目前本项目暂不实现
- 功能较少，用户配置无
- 视频聊天的时候存在一定的回声
- …
- https://github.com/sjtu-course/ppt/tree/main/day2-2/src_code/chat-demo ↩︎
- https://reactjs.org/ ↩︎
- https://ant-design.gitee.io/components/overview/ ↩︎
- https://github.com/webrtc ↩︎
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/184772.html原文链接：https://javaforall.cn