首页 > 其他分享 >开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具

开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具

时间:2024-11-02 20:17:33浏览次数:5  
标签:NextTalk 全站 项目 route Nextron 点击 聊天工具 NextJS

NextTalk

简介

该项目是一个基于Nextron(NextJS+Electron)的桌面端实时聊天工具。

但由于使用了NextJS中的ssr及api route功能,该程序只能在开发环境运行。

关于生产版本:我将其网页端部分分离,并用Pake将其打包成桌面端,生产体验安装包我放在了release里,目前只打包了windows版本。

github:Mebius1916/NextTalk: A real-time chat tool based on nextron (NextJS+electron) with integrated AI functions

觉得不错的话给个star吧~


技术栈

前端: NextJS (React) + TailwindCSS + TypeScript + ThreeJS + NextUI + MaterialUI (icons) + NextAuth + Cloudinary + Electron + Pusher + React-toastify + OpenAI + React-email

后端: NextJS (SSR) + MongoDB + Mongoose


功能

登陆、注册、重制密码与邮箱验证

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注册和重置模块需要邮箱验证,发送code后请及时查看注册邮箱填写验证码。

聊天界面

在这里插入图片描述

右上角登出按钮可登出账号。

发送消息及图片

在这里插入图片描述

点击输入框左侧图片按钮即可发送图片。

创建聊天

在这里插入图片描述

单选创建一对一聊天,多选创建群组聊天。

右边是个3D星球,可自行旋转。

申请好友、同意申请

在这里插入图片描述

成为好友之前是不能发送消息的,请点击Add friend按钮发送好友请求。

在这里插入图片描述

对方接受到好友请求后点击消息旁的对勾即可加为好友。

圣地巡礼

在这里插入图片描述

用内联框架嵌入,因为个人很喜欢这个网站所以嵌入哈哈哈。

右下角功能键最上方有个刷新图标,点击可以重置页面。

AI助手

在这里插入图片描述

GPT3.5助手,比较粗糙,没有对生产消息做格式处理,不能生产markdown等格式只能生成普通文本格式。

修改个人头像名字、群组头像名称

在这里插入图片描述

点击聊天界面右上角即可修改自己的头像和名字。

在这里插入图片描述

点击聊天中的群聊头像,即可修改群聊头像和名称。


注意

该项目虽然是基于Nextron的,但是当我打包的时候发现Nextron生产环境是不支持NextJS的ssr及api route的(我使用了),所以这个项目只能在开发环境运行,也就是说这个项目严格意义上来说只是个nextjs项目,这就导致我并不喜欢nextron,具体体现在以下几点:

  1. 我认为api route(ssr)是NextJS中不可或缺的一部分,我之所以使用NextJS便是因为其可以快速开发全栈项目的特性,而Nextron阉割掉了这个功能就让我感觉Nextron只是拥有NextJS生态的react+electron。作者说阉割是因为安全问题,而我个人认为这个功能可以不用,但是得存在,像我这种个人开发者并不担心什么安全性问题。
  2. Nextron中不支持app route的写法,只支持传统的pages route,这就是为什么我的项目中使用的是pages route而不是ap route这是不好的,app route才是NextJS的未来。
  3. Nextron只支持webpack打包,我个人认为在现在webpack作为打包工具唯一的优势应该就是其生态广阔,我个人还是更加喜欢vite打包。

运行

下载依赖:npm install

开发环境运行:npm run dev

注意:.env文件在/renderer目录下,请补全后运行。


网页版

网页版通过vercel部署。

github:Mebius1916/NextTalk_web: NextTalk项目的网页版

体验地址:https://nexttalk.mebius.fun


提交pr

可以参考我设置的issue,当然你有不错的想法也是可以的,不局限于我设置的issue

如果有想法且不会配置.env的可以提issue,审核通过后给你发我自己的.env


免责申明

写该项目的初衷是因为我初学reactnextjs所以想自己从0到1写一个项目来熟悉语法,所以该项目代码难免会粗糙,各位当成小玩具看待就可以啦。

标签:NextTalk,全站,项目,route,Nextron,点击,聊天工具,NextJS
From: https://blog.csdn.net/qq_74099184/article/details/143439126

相关文章

  • 【故障公告】数据库服务器 CPU 100% 造成全站故障
    非常抱歉,今天下午16:03~16:33期间,我们使用的阿里云RDS实例(SQLServer2016标准版,16核32G)出现CPU100%问题,造成全站无法正常访问,由此给您带来很大的麻烦,请您谅解。发现故障后,我们通过阿里云RDS控制台进行了主备切换,由于CPU被占太满,主备切换失败,然后尝试重启实例,重启后......
  • PbootCMS全站模板date时间标签/时间格式常见的8种调用方式
    根据你提供的信息,我们可以详细解释如何使用列表页和内容页的时间格式化标签,并给出具体的示例和应用场景。列表页时间格式化列表页的时间格式化标签 [list:date] 可以通过添加 style 参数来改变时间的显示格式。以下是具体的效果和示例:基础格式html <!--默认格式--......
  • PbootCMS全站模板date时间标签/时间格式常见的8种调用方式
    为了更好地展示PbootCMS中不同时间格式的使用方法,可以将上述信息汇总成一个表格。以下是详细的表格,展示了列表页和内容详情页中不同的时间格式及其效果。时间格式汇总表标签名功能描述格式示例效果示例[list:date]列表页时间(默认格式)[list:date]2021-12-0609:1......
  • PbootCMS调用全站所有栏目最新文章的写法
    在PbootCMS中,如果你想调用全站所有文章,可以使用{pboot:list}标签,并且将scode参数设置为*来实现。下面是一个具体的示例代码:{pboot:listscode=*num=5}<li><ahref="[list:link]">[list:title]</a></li>{/pboot:list}代码解析{pboot:listscode=*num=5}:这个标签......
  • PbootCMS全站模板date时间标签/时间格式常见的8种调用方式
    全站模板中日期时间标签和时间格式的常见调用方式,绘制成表格形式:调用方式适用页面格式效果[list:date]首页/列表页2021-12-0609:12:30[list:datestyle=Y-m-d]首页/列表页2021-12-06[list:datestyle=Y]首页/列表页2021[list:datestyle=m-d]首页/列表页......
  • 织梦DEDECMS怎么实现全站动态浏览
    要实现DedeCMS(织梦CMS)全站动态浏览,可以通过以下步骤来进行配置:首页动态化:登录织梦CMS的后台管理系统。导航到“核心”->“全局配置”。在“站点设置”标签页中,找到“主页网址”设置,确保主页网址是动态的,例如 http://www.example.com/ 而不是静态的 http://www.example.c......
  • 局域网聊天工具:提升企业内部信息安全的私有化即时通讯软件
    在数字化转型的过程中,越来越多的企业依赖即时通讯工具来进行内部沟通与协作。然而,许多企业在使用的微信、钉钉等SaaS聊天工具却存在着严重的安全隐患和管理难题,这些问题不仅危及信息安全,还影响企业的整体运营效率。针对这些痛点,选择一款私有化部署的局域网聊天工具成为了企业的当务......
  • pbootcms模板首页如何调用全站所有的文章
    在PbootCMS中,如果你想在模板首页调用全站所有的文章,你可以使用 {pboot:list} 标签,并通过设置 scode 属性为 * 来实现这一点。这表示不指定特定的栏目,而是调用整个站点的所有文章。下面是一个示例代码片段,展示了如何调用全站所有文章,并且限制每次只显示5篇文章:{pboot:......
  • tiktok节点搭建,独立站建站(全站最详细)
    一、服务器购买我们购买阿里云的云服务器找到官网选择阿里云产品-云服务器ECS选择立即购买这里可以按照自己的需要选择快速购买和自定义购买。阿里云服务器的通用型、共享型和计算型是三种不同类型的计算资源规格,主要区别如下:1.通用型服务器:通用型服务器是专属......
  • 当网站配置好https协议之后 全站url http怎么跳转到https
    如果是apache环境,在站点根目录下.htaccess文件里新增以下代码,具体位置请看参考下图:#http跳转到httpsRewriteCond%{SERVER_PORT}!^443$RewriteRule^(.*)$https://www.xxxxx.cn/$1[LR=301]当网站配置好了HTTPS协议之后,为了保证网站的安全性和统一性,通常会将所有的......