首页 > 编程知识 正文

react开源项目,react入门

时间:2023-05-04 18:41:56 阅读:130676 作者:3505

chat-room代码已经上传到GitHub上了,喜欢的话请给我一个

说明本项目灵感来自交大x字节跳动公开课,格式参考其demo1,但本项目采用React2编写,UI组件使用Antd3

本项目实现的功能如下。

用户注册用户注册单人聊天多人聊天表情发送文件传输音视频通话本项目采用的技术如下:

React Antd开发前端接口电子封装APP应用程序,本地测试不适用于https。 这是因为证书不受nodejs socket.io express后端逻辑处理WebRTC语音聊天、音视频通话sqlite3数据库管理。 用户注册登录如何测试本项目测试所需条件因功能而异,但主要是局域网视频通话需要使用https,现简述如下,根据本说明本项目正常运行

很简单的测试。 请直接运行安装软件包,安装APP应用程序,然后在服务器下运行

yarn install---- productionyarnstart在http环境中运行,可以执行大多数功能,发送音视频呼叫除外

也可以使用安装包进行安装。 服务端的操作是一样的

导航到客户端目录(包括package.json ),然后执行以下操作: (yarn yarn安装- -产品# )如果需要打包,请运行yarn installyarn start。 此时,项目应该在以下URL上运行

在网页上直接打开并执行上述步骤,然后必须在服务器目录中执行服务端代码yarn install-- production yarnstart : 运行完成后,控制台将打印相应的端口号

此时,您可以访问http://localhost:3001以确定服务端是否正常运行。 如果页面上显示访问服务,则表示可以访问,并且服务端运行正常

返回步骤2,登录进入。 如果没有帐户密码,请先注册一个。 这里提供了几个测试用账户密码。 为了查看效果,您可以同时登录多个帐户(同一房间)

账户aabbcc可以在聊天成员中选择一个后发送消息,对方会收到相应的消息,如果对方当前不是聊天对象,则会显示红点提示

可以选择一个,发送信息~

在此条件下只能发送文件、文本消息和表情

在http://localhost:3000 (通过其他非LAN IP地址访问网页)条件下,可以使用音视频功能

在https环境中运行此环境支持使用所有功能,并且视频聊天需要使用多个设备(也可以是本地两个网页)进行测试。 在此对LAN构成进行说明

进入服务器目录,运行以下命令yarn install---- productionyarnhttps,使用第二个设备连接到本地计算机上的热点,打开cmd,然后将ipconfig 假设ip,打开. env.development,设置react _ app _ socket _ URL=https://{ IP } 33603001,然后使用与上述相同的命令运行客户端

在第二台设备上打开网页https://{ip}:3000 (请勿关闭以前的接口。 由于自己颁发的https证书不受信任,因此关闭后可能无法连接到服务器端。 )当地也是如此

进入客户端或服务端接口时,可能会发生以下情况: 请选择高级连续

建议在本地端将数据发送到第二个设备(视频不太稳定)。

演示效果的简要说明:作为聊天程序,用户之间必须进行聊天。 一个是写下对方的地址直接发送信息,另一个是通过第三方进行信息的中继。 我们只要知道服务端的地址就行了。 当然,也可以在服务端知道对方的地址并直接通信。 本项目采用服务端中继

文本、文件和语音只是发送的数据类型不同。 socket.io支持发送二进制文件,然后传输即可,但请设置缓冲区大小。 否则,连接容易断开

音视频通话使用WebRTC4,用户a首先要求用户b是否可以通话,如果可能的话,然后使用RTCPeerConnection进行连接,向对应的视频元素添加流即可。 实际上,本项目采用的是以下两个过程,一个是为了确认用户是否同意,另一个是建立实际连接

docker在客户端目录中运行

docker build-t=chat-client.docker run-p 300033603000-- nameclientchat-client位于服务器目录中

成功创建docker build-t=chat-server.docker run-p 300133603001-- nameserverchat-server后,可以在本地预览

如果只限于本项目的数据不永久保存、实时聊天通话、所有消息都保存在内存中,当然可以永久保存,但目前本项目功能较少,用户配置视频聊天时一定

3359reactjs.org/

3359 ant-design.gitee.io/components/overview /

3359github.com/webrtc

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。