大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
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://javaforall.net/184772.html原文链接：https://javaforall.net
