前端聊天功能如何实现_react使用websocket

前端聊天功能如何实现_react使用websocketchat-room代码已经上传到GitHub,如果喜欢,不妨给一个⭐️说明本项目灵感来自交大x字节跳动的公开课,样式参考其demo1,但本项目采用React2所写,UI组件使用Antd3本项目实现的功能有:用户登录用户注册单人聊天多人聊天表情发送文件传输发送语音视频通话本项目采用的技术有:React&Antd开发前端界面Electron打包应用程序,本地测试不适用于https,因为证书不被信任nodejs&

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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环境

在该条件下,可以运行绝大多数的功能,除发送语音&视频通话

也可以使用安装包进行安装,服务端操作同下

  1. 进入到客户端目录下(含package.json),执行下面的操作
# 建议使用yarn
yarn install --production # 如需打包,运行yarn install
yarn start

这个时候,项目应该会在如下网址运行
前端聊天功能如何实现_react使用websocket

  1. 直接在网页中打开,效果如下

前端聊天功能如何实现_react使用websocket

  1. 执行到上面的步骤之后,需要到server目录下执行服务端代码
yarn install --production
yarn start

运行完之后,控制台会打印出对应的端口号

前端聊天功能如何实现_react使用websocket

此时可以访问http://localhost:3001进行确认服务端是否运行正常,如果页面中出现access success,说明可以访问,服务端正常运行

  1. 回到第2步,登录进入,如果没有账号密码,可以先注册一个,这里提供几个测试用的账号密码,为了看到效果,可以同时登录多个账号(同一房间)

    账号 密码
    a a
    b b
    c c
  2. 在聊天成员中选择任意一个,便可以发送信息,对方收到对应信息,如果对方当前聊天对象不是发送对象,那么便会出现红点进行提示

    选中一个,才能发送消息~

    该条件下只能发送文件,文本信息以及表情

    http://localhost:3000(非其他局域网ip地址访问网页)条件下,可以使用语音视频功能

运行于https环境

该环境下支持使用所有功能,视频聊天需要使用多个设备(本地两个网页也可)进行测试,在这里说明局域网配置

  1. 进入server目录,执行下面命令
yarn install --production
yarn https
  1. 使用第二个设备连接到本地电脑的热点,打开cmd,使用ipconfig查看所有ip地址,使用https://{ip}:3000访问(一定要加https),选择能够访问到前端的ip地址,假设为ip,打开.env.development,设置为REACT_APP_SOCKET_URL=https://{ip}:3001,使用上面一样的命令运行客户端

  2. 在第二台设备中打开网页https://{ip}:3000(之前界面不要关闭,因为自己签发的https证书不受信任,关闭之后可能不能连接到服务端),然后登录进去;本地亦是如此

    进入客户端或者服务端界面的时候都有可能出现下面的情况,请选择advanced中的continue

    前端聊天功能如何实现_react使用websocket

  3. 建议在本地端发送数据给第二台设备(视频不太稳定)

前端聊天功能如何实现_react使用websocket
前端聊天功能如何实现_react使用websocket
前端聊天功能如何实现_react使用websocket
前端聊天功能如何实现_react使用websocket

演示效果

前端聊天功能如何实现_react使用websocket
前端聊天功能如何实现_react使用websocket

简单讲解:

作为一个聊天程序,用户之间需要进行聊天,一个是写死对方的地址,然后直接发送消息,另一个就是通过第三方进行消息的中转,我们只需要知道服务端的地址即可,当然,我们也可以通过服务端知道了对方的地址,然后直接进行通信,本项目采用的是服务端中转

前端聊天功能如何实现_react使用websocket

文本,文件,语音只不过发送的数据类型不同罢了,socket.io支持二进制文件的发送,那么由它转发即可,不过注意设置好缓冲大小,否则容易断开连接

音视频通话使用WebRTC4,用户A先请求用户B可否进行通话,如果可以,然后在使用RTCPeerConnection进行连接,将stream加到对应的video元素上即可,实际上本项目采用的有两次下面的过程,一次是为了确认用户是否同意,另一次才是实际连接的建立

前端聊天功能如何实现_react使用websocket

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

创建成功之后,可在本地进行预览

局限
  • 本项目数据不进行持久性保存,实时聊天通话,所有消息仅保存在内存中,当然可以实现持久化保存,但目前本项目暂不实现
  • 功能较少,用户配置无
  • 视频聊天的时候存在一定的回声

  1. https://github.com/sjtu-course/ppt/tree/main/day2-2/src_code/chat-demo ↩︎

  2. https://reactjs.org/ ↩︎

  3. https://ant-design.gitee.io/components/overview/ ↩︎

  4. https://github.com/webrtc ↩︎

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184772.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java static关键字详解

    Java static关键字详解static关键字在类中,用static声明的成员变量为静态成员变量,也成为类变量。类变量的生命周期和类相同,在整个应用程序执行期间都有效。这里要强调一下:static修饰的成员变量和方法,从属于类普通变量和方法从属于对象静态方法不能调用非静态成员,编译会报错static关键字的用途一句话描述就是:方便在没有创建对象的情况下进行调用(方法/变量)。显然,被sta…

  • noip2018普及组初赛解析_NOIP复赛

    noip2018普及组初赛解析_NOIP复赛博主是一个高中生,在进行noip训练的时候遇到这一题,当时写了2个多小时惭愧啊惭愧,只能感叹一声普及组好可怕!!!然而这题在code.vs里只有黄金。。。我现在很怀疑自己是怎么做出那些大师题的。。。原题链接在此:http://codevs.cn/problem/1133/好了,现在我们来分析一下这个题目。这个题目中读入的字符串是只有‘*’、‘+’、‘(‘和’)‘的,而

  • clion2021.12.13激活(注册激活)

    (clion2021.12.13激活)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • Javascript获取select下拉框选中的的值[通俗易懂]

    Javascript获取select下拉框选中的的值[通俗易懂]现在有一id=test的下拉框,怎么拿到选中的那个值呢?分别使用javascript原生的方法和jquery方法    text1    text2    code:一:javascript原生的方法  1:拿到select对象:var myselect=document.getElementById(“test”); 2:拿到

  • Oracle数据库入门心得[通俗易懂]

    Oracle数据库入门心得[通俗易懂]Oracle的体系太庞大了,对于初学者来说,难免会有些无从下手的感觉,什么都想学,结果什么都学不好,所以把学习经验共享一下,希望让刚刚入门的人对oracle有一个总体的认识,少走一些弯路。  一、定位  oracle分两大块,一块是开发,一块是管理。开发主要是写写存储过程、触发器什么的,还有就是用Oracle的Develop工具做form。有点类似于程序员,需要有较强的逻辑思维和创造能力,

    2022年10月20日
  • Python 学生信息管理系统——文章中源码100%真实有效—–如何将类、初始化属性、模块、循环判断、静态方法等一系列知识点结合起来做一个项目「建议收藏」

    Python 学生信息管理系统——文章中源码100%真实有效—–如何将类、初始化属性、模块、循环判断、静态方法等一系列知识点结合起来做一个项目「建议收藏」这篇博客主要就是把学生管理系统进行源码分享,这段源码很好的将前面所学的全部串在一起。就我个人而言真的是非常有价值。就算你python前面的基础不好,学完这个系统你会有重获新生的感觉。本文适合需要用python完成课程大作业、python爱好者、python路上的学习者、初学python者、需要将python知识点串在一起的人、上进的人。manageSystem.py#TODO鸟欲高飞,必先展翅#TODO向前的人:Jhon

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号