前言:
而今小伙伴们对“java做聊天室”大体比较珍视,各位老铁们都想要了解一些“java做聊天室”的相关资讯。那么小编在网上收集了一些有关“java做聊天室””的相关资讯,希望朋友们能喜欢,看官们快快来了解一下吧!摘要
在本教程中,我将建立一个聊天室网络应用,允许用户输入他们的信息并与ChatGPT进行对话。
开篇
最近,ChatGPT已经变得非常流行。人们要求ChatGPT帮助他们写论文、做作业,甚至要求他们如何赚钱。有了类似的想法,我认为通过向ChatGPT咨询,建立一个聊天室应用程序是很有趣的。
从简单的东西开始,我计划建立一个聊天室网络应用,允许用户输入他们的信息并与ChatGPT进行对话。由此产生的应用程序将看起来像这样。
我将首先弄清楚如何整合ChatGPT,因为这对我来说是新事物。然后,我将建立用户界面,实现逻辑和动作,完成整个应用程序。
不知道如何调用ChatGPT?
我是ChatGPT的新手,不知道如何调用ChatGPT,所以我的脑海中突然出现了一个想法。为什么不直接问ChatGPT呢?
所以我提出了我的第一个问题。
你能给我一个java的代码例子,向ChatGPT发送一个HTTP请求来发送一个消息吗?
然后ChatGPT给我回复了一个连接到 的Java类例子,并提醒我用我自己的API密钥替换YOUR_API_KEY。
这很有用。一个好的开始!
然后我问:
我在哪里可以得到API密钥?
ChatGPT给我提供了相关信息,我在这里总结一下:
去OpenAI的网站。注册一个账户,或者如果你已经有一个账户,就登录。一旦你登录了,在控制台中导航到API密钥部分。点击 "创建密钥 "按钮。给你的API密钥起个名字,并指定你想使用它的项目。点击 "创建 "来生成API密钥。把API密钥保存在安全的地方,因为它只会显示一次。
看起来很有希望。但当我实际运行Java代码的例子时,API返回代码429,这不是我所期望的。在检查了文档后,似乎URL是错误的。
所以我重新表述了我的问题。
如何在Java中调用OpenAI GPT-3模型?
它用另一个代码回答了我,这个代码连接到了这里。
点击给定的链接后,我发现这个URL已经失效了。所以我善意地告诉ChatGPT。
打开AI文档,提到Engines端点已被废弃。
ChatGPT说:"你是正确的,"并给了我另一个带有正确URL的代码。经验之谈! 不要总是相信ChatGPT的回答。
这次运行代码,我终于得到了预期的JSON响应。
由于我懒得检查JSON字段以获得实际的文本回复,我又问了一个问题。
如何在Java中从OpenAI API响应中提取 "文本"?
而我又一次从ChatGPT中得到了一些有用的东西。
在ChatGPT的帮助下,通过将Java类重构为几个方法,我完成了ChatService,它调用OpenAI API来接收聊天完成建议。基本思路是创建一个HttpURLConnection实例,向OpenAI API端点()发送一个POST请求,请求体包括聊天提示和其他相关参数,并接收JSON格式的API响应。我在这里包括了技术细节。
Java 代码如下
public class ChatService { static final String API_KEY = loadApiKey(); private HttpURLConnection con; private URL url; public ChatService() { try { url = new URL("<;"); }catch (MalformedURLException e){ throw new IllegalStateException(e); } } public String prompt(String message) { try { sendRequest(message); return readResponse().trim().replace("\\n\\n", "\\n"); } catch (IOException e) { e.printStackTrace(); return e.toString(); } } private void sendRequest(String prompt) throws IOException { initHttpURLConnection(); String requestBody = "{\\"model\\": \\"text-davinci-003\\", \\"prompt\\": \\"" + prompt + "\\", \\"temperature\\": 0.5, \\"max_tokens\\": 2048}"; con.setDoOutput(true); DataOutputStream wr = new DataOutputStream(this.con.getOutputStream()); wr.writeBytes(requestBody); wr.flush(); wr.close(); }
prompt()向API发送一个聊天提示,并接收一个完成建议。
sendRequest()设置了HttpURLConnection,并将JSON请求体发送给API。
private String readResponse() throws IOException { int responseCode = this.con.getResponseCode(); BufferedReader in = new BufferedReader(new InputStreamReader(this.con.getInputStream())); String inputLine; StringBuffer response = new StringBuffer(); while ((inputLine = in.readLine()) != null) { response.append(inputLine); } JsonParser parser = new JsonParser(); JsonElement jsonElement = parser.parse(response.toString()); JsonObject jsonObject = jsonElement.getAsJsonObject(); JsonArray jsonArray = jsonObject.getAsJsonArray("choices"); JsonObject firstChoice = jsonArray.get(0).getAsJsonObject(); in.close(); con.disconnect(); return firstChoice.get("text").getAsString(); }
readResponse()从API读取JSON响应,并从JSON对象中检索完成建议。
关于OpenAI的API和完成端点的更多信息可以在OpenAI官方API文档中找到。
在我通过询问GPT,搞清楚了最大的未知数--ChatGPT的整合之后,我已经准备好将其引入我的网络应用。
用ZK设计一个聊天用户界面
在ChatService准备好后,我现在需要一个用户界面来让最终用户输入他们的信息。由于我已经和ZK框架合作了很长时间,我决定使用ZK和zul来构建用户界面。
用ZK组件构建用户界面
如果你没有听说过ZK--它是一个UI框架,允许你在Java中构建Web应用程序。ZK提供了一种ZUL语言,它为构建用户界面带来了大量的组件,从标签、按钮和文本框等基本元素,到网格、树和图表等高级组件。除了这些组件之外,ZUL还提供了一套属性,可以用来定制组件的行为和外观。
我将要建立的聊天室应用程序看起来是这样的。
这个用户界面可以用下面的zul来完成
<zk xmlns:h="native"> <style src="style.css"></style> <window vflex="1" sclass="container"> <h:h1 style="text-align: center;">Chat with AI</h:h1> <checkbox label="fast response"></checkbox> <hlayout vflex="1"> <div hflex="7" vflex="1"> <div vflex="1" sclass="messageBox" style="overflow-y: auto"> </div> <hlayout> <textbox id="myMessage" focus="true" hflex="1" placeholder="type your messages here"></textbox> <button id="send" iconSclass="z-icon-send" width="100px"></button> </hlayout> </div> </hlayout> </div></zk>
hflex and vflex
在上面的ZUL代码中,我使用"<hlayout>"来定义我的聊天室的水平布局。<hlayout>有2个属性,hflex和vflex,它们决定了组件的相对大小。"hflex"的值决定了高度而"vflex"的值决定了宽度。在这个例子中,我用hflex="1 "来指定第一个"<div>"应该占用一个单位的水平空间,用hflex="7 "来指定第二个"<div>"应该占用七个单位的水平空间。"这可以使聊天室的布局对大多数屏幕宽度有响应,因为它没有固定的宽度。
textbox
textbox "用于创建聊天室中的文本输入区域。"我使用id属性给它一个唯一的标识符,它可以用来在我的composer类中引用文本框(在后面的段落中解释)。"焦点 "属性被设置为 "true",以强制文本框在页面加载时接受焦点。占位符属性用于向终端用户提供关于文本框用途的提示。
混合HTML标签
在一个ZUL文件中,HTML标签可以在ZUL命名空间内使用,指定为 "xmlns:h"="native"。然后,标签"<h:h1>表示一个HTML标题标签。有了这个命名空间,你可以在他们的ZUL页面中利用HTML标签,如标题、链接和图片,为他们的网络应用添加结构和风格。这为你提供了包括由网页设计师制作的HTML片段的能力,并在zul中建立你自己的自定义部分。
构建用户界面的各种方法
除了编写zul之外,你还可以通过另外2种方式在ZK中建立你的UI。
1.以Swing风格在Java中建立UI
2.用ZUL代码片段调用Java方法。我将在控制器部分做进一步解释。
用CSS打造一个独特的用户体验
在上一节中,我做了用户界面的布局。现在,为了使它更漂亮,我用对比强烈的颜色和不同的背景来区分我的信息和AI的回复。这不仅增强了应用程序的视觉效果,而且也增加了对话的整体可读性。我还为消息框添加了适当的边距和填充物,以创造一个视觉上有吸引力的、有条理的布局。这些都可以通过使用CSS来实现。
在这一节中,我将谈一谈用CSS为ZUL页面设计样式的基本知识,包括<style>标签的使用、sclass和style属性,以及iconSclass属性。
<style>"允许你为ZUL页面定义CSS样式。你可以用src属性在你的ZUL中直接包含一个CSS文件,如上面的代码片段。"这个文件中定义的样式可以使用sclass属性应用到你的ZUL中的组件上。
sclass 属性用于将CSS类应用于组件。在上面的zul中,容器类被应用到<div>组件上,并使用sclass="container "属性。通过使用CSS类,你可以在你的ZUL中为多个组件应用一致的样式。
style 属性允许你将内联样式直接应用于一个组件。在上面的ZUL中,messageBox类被应用到了带有sclass=messageBox属性的div组件中。此外,overflow-y: auto 样式被添加到样式属性中,以指定<div>的内容在溢出其高度时应可垂直滚动。
iconSclass 属性用于在一个按钮上显示图标。"在应用程序中,一个发送图标被显示在<button>上,图标Sclass="z-icon-send "属性。"这是用ZK捆绑的Font Awesome图标完成的,它提供了大量可扩展的矢量图标集合,可以用CSS定制。ZK已经默认包含了它,你不需要手动下载和包含它。
用ZK控制器实现你的应用逻辑
现在我已经准备好了我的用户界面,并以我喜欢的方式进行了风格设计。我的下一步是实现我的应用逻辑。这个用例中的应用逻辑非常简单。
当点击发送按钮(或按下回车键)时,在消息区显示用户输入的消息和ChatGPT的回复。
我目前使用的模式是ZK MVC。我应该在一个ZK控制器的事件监听器中实现我的应用逻辑。控制器是一个Java类,它通过操纵ZK组件来实现应用逻辑,它可以用来处理事件,访问数据,以及操纵用户界面。ZUL中的相关属性是apply属性,它被用来将ZK控制器类与ZUL组件联系起来。
<window apply="org.zkoss.support.ChatRoomComposer" vflex="1" sclass="container">
在这个应用程序中,apply属性被设置为org.zkoss.support.ChatRoomComposer,它将composer类与div联系起来。然后,这个控制器就可以操作这个div和它的子组件了。
连接组件
"ChatRoomComposer "扩展了ZK框架的SelectorComposer。SelectorComposer提供了一个注解,"@Wire",用于将ZUL中的组件与composer中的成员字段连接起来。它提供了类似CSS的选择器
public class ChatRoomComposer extends SelectorComposer { @Wire protected Textbox myMessage; @Wire private Button send; @Wire(".messageBox") protected Div msgBox; @Wire("checkbox") private Checkbox fastCheckbox;第2-3行:ZUL中id="myMessage "的<textbox>被连接到myMessage字段,因为默认是 "ID选择器"第6-7行:这是由 "sclass选择器 "连接的。第8-9行:这是由 "组件名称选择器 "连接的。
关于完整的选择器语法,请参考Wire Components。
事件监听器
控制器还通过@Listen包含了事件监听器,它监听ZUL中组件上的事件,例如最终用户点击按钮或检查复选框。
点击发送按钮
在这个应用程序中,当 "发送 "按钮被点击时,我想调用send(),所以我写道。
public class ChatRoomComposer extends SelectorComposer {... @Listen("onClick = #send") public void send(){...}
onClick是事件名称。#send是 "发送 "按钮的ID选择器。
此外,为了方便,当终端用户在关注文本框时按下 "Enter "键,我也希望send()方法被调用。因此我写道。
public class ChatRoomComposer extends SelectorComposer {... @Listen("onClick = #send; onOK = #myMessage") public void send(){...}
onOK是终端用户在文本框中按下 "Enter "键时触发的事件名称。
所以现在我可以用一个监听器成功地监听到2个事件。关于完整的监听器语法,请参考《Wire Event Listeners》。
发送我的信息
在send()中,我可以调用组件API来实现应用逻辑:将我的消息发送到ChatGPT。
public void send(){ if (myMessage.getValue().isEmpty()) return; if (fastCheckbox.isChecked()){ submitFastResponse(); }else{ submit(); } }
myMessage.getValue() 返回文本框中的用户输入。
fastCheckbox.isChecked() 返回 "快速响应 "的检查状态。
现在我可以发送和接收消息了,我只需要在用户界面上显示它们。
显示AI回复 - 在Java代码中构建UI
在文章的开头,我用zul来显示我的用户界面。你可以在这里使用同样的方式来显示AI回复,但我决定使用一种不同的技术--使用Java代码来创建和操作ZK组件。
protected void appendAiMessage(String myMessage) { Div msgDiv = new Div(); Label aiName = new Label("ChatAI: "); aiName.setSclass("ai"); msgDiv.appendChild(aiName); Label msg = new Label(chatService.prompt(myMessage)); msg.setMultiline(true); msgDiv.appendChild(msg); msgBox.appendChild(msgDiv); }
它创建了一个Div组件来容纳整个AI信息。创建一个新的Label组件,名为aiName,文本为 "ChatAI:",并将其样式类设置为ai。因为我想把这个文本变成绿色。它将aiName追加到msgDiv中作为其子项。它创建了另一个名为msg的Label,其文本来自chatService.prompt(),是ChatpGPT的回复。我将多行属性设置为true以显示多行消息最后,它将msgDiv追加到msgBox中作为其子节点。
正如你所看到的,你可以在Java中创建UI组件,配置它们,并建立父-子关系。实际上,你可以用zul做的一切,都可以在Java代码中完成。
显示我的信息 - 用Zul在Java中建立UI
接下来,我将在用户界面中显示用户的信息。同样,你可以使用上面提到的同样的方法,但我决定使用另一种技术--用ZUL在Java中构建用户界面。
用zul和Java构建UI有它自己的好处。使用zul的好处是可读性。通过ZUL,你可以对一个页面有一个大致的了解。然而,使用Java可以让你在运行时根据状态动态地构建UI。如果我可以同时拥有这两个好处呢?这将是非常好的!
ZK确实提供了这样一种方式:通过向Executions.createComponents()传递zul路径,你可以用zul动态创建组件
protected void appendMyMessage(String myMessage) { Div msgDiv = new Div(); Executions.createComponents("/me.zul", msgDiv, null); msgDiv.appendChild(new Label(myMessage)); msgBox.appendChild(msgDiv); }
从一个ZUL代码段动态地创建UI组件。ZUL代码片段为用户名创建了一个Label。然后这个组件被附加到msgDiv .NET中。
使用这种方法,你可以建立一个动态的、功能性的用户界面,并根据你的应用程序的需要进行优化。
在这一点上,我已经把所有的东西都挂接起来了,我的由ChatGPT驱动的聊天室应用程序已经完全正常了
总结
通过询问ChatGPT,我能够收集到将ChatGPT纳入我的应用程序所需的所有信息。并非所有ChatGPT的答案都是准确的,但询问后续问题或重新表述我的问题都有帮助,并引导我找到我需要的一切。这个过程很有趣,节省了我50%以上的阅读文档和在线寻找资源的时间。
标签: #java做聊天室