文本聊天室(TCP-中)

 

  • 开始我们今天的代码实现,我们接着上一回,上回实现了服务器的代码

    这次实现客户端的UI(界面)层,

 

  1. 我们界面层采用javafx来进行绘制,首先有个登录服务器的界面然后切换到聊天界面
  2. 运行结果如下.


源代码如下:

  1 package jffx.blogs.net;
  2 
  3 import javafx.application.Application;
  4 import javafx.geometry.Insets;
  5 import javafx.geometry.Pos;
  6 import javafx.scene.Scene;
  7 import javafx.scene.control.*;
  8 import javafx.scene.control.Button;
  9 import javafx.scene.control.Label;
 10 import javafx.scene.control.ScrollPane;
 11 import javafx.scene.control.TextArea;
 12 import javafx.scene.control.TextField;
 13 import javafx.scene.layout.FlowPane;
 14 import javafx.scene.layout.GridPane;
 15 import javafx.scene.layout.HBox;
 16 import javafx.scene.layout.Pane;
 17 import javafx.scene.text.Text;
 18 import javafx.stage.Stage;
 19 
 20 import java.net.Socket;
 21 
 22 
 23 //采用监听按钮事件来切换舞台使得登录界面切换
 24 /**
 25  * 代码文件:    TalkRoomServer.java
 26  * 功能描述:    客户端代码
 27  */
 28 public class TalkRoomClient extends Application {
 29     private TextArea ta = new TextArea();           //聊天记录框
 30     private TextField tf = new TextField();          //信息发送框
 31     private ComboBox<String> userList = new ComboBox<>();      //在线用户下拉列表
 32 
 33     //用户名称
 34     String name ;
 35     //与服务器端连接的Socket
 36     Socket socket ;
 37 
 38     @Override
 39     public void start(Stage primaryStage) {
 40         /**
 41          * 画登录界面,采用GridPane
 42          */
 43         GridPane mainPane = new GridPane() ;
 44 
 45         //设置面板及布局
 46         mainPane.setAlignment(Pos.CENTER) ;   //向中间靠齐
 47         mainPane.setHgap(10) ;      //节点的水平间距
 48         mainPane.setVgap(10) ;      //节点的垂直间距
 49         mainPane.setPadding(new Insets(5, 5, 5, 5)) ;
 50 
 51         //文本框
 52         Text text = new Text("Welcome") ;
 53         mainPane.setId("welcome-text");
 54         mainPane.add(text, 0, 0, 2, 1) ;
 55 
 56         //标签加上输入的文本域
 57         Label serviceName = new Label("SericeName: ") ;
 58         TextField tfForService = new TextField() ;
 59         mainPane.add(serviceName, 0, 1) ;
 60         mainPane.add(tfForService, 1, 1);
 61 
 62         //昵称加上输入的文本域
 63         Label inputName = new Label("Name: ") ;
 64         TextField tfForName = new TextField() ;
 65         mainPane.add(inputName, 0, 2) ;
 66         mainPane.add(tfForName, 1, 2) ;
 67 
 68         //按钮这行单独处理,用一个Hbox包装一下
 69         Button btForLogin = new Button("Login") ;
 70         HBox box = new HBox(10) ;
 71         box.getChildren().add(btForLogin) ;
 72         box.setAlignment(Pos.BOTTOM_RIGHT) ;        //靠向最右边
 73         //然后再加入主面板
 74         mainPane.add(box, 1, 4) ;
 75 
 76 
 77         //显示一下--将面板放入舞台,至于为什么清查阅相关资料,-----h
 78         Scene scene = new Scene(mainPane, 300, 200) ;
 79         primaryStage.setScene(scene) ;
 80         primaryStage.setTitle("Login") ;
 81         primaryStage.show() ;
 82 
 83         /**
 84          * 监听按钮事件,以更换舞台
 85          */
 86         //这里用lambda表达式,因为就算你写完整的继承事件接口即
 87         // EventHandle<ActionEvent>处理,也只是处理一个handle方法
 88         //所以还不如写lamda,因为handle()只有一个参数,所以event只是一个标识符
 89         // 代表只有一个参数.
 90         btForLogin.setOnAction(event -> {
 91             /**
 92              * 继续画需要切换的聊天界面图
 93              */
 94             Pane pane = new FlowPane() ;
 95             pane.setPadding(new Insets(20, 20, 20, 20));
 96             //设置文本域的属性
 97             ta.setEditable(false);      //不可编辑
 98             ta.setWrapText(true);       //自动换行
 99             pane.getChildren().add(new ScrollPane(ta)) ;
100 
101             HBox hBox = new HBox(20) ;
102             //加入在线用户及输入文本框
103             //getItems()方法返回一个选项列表
104             userList.getItems().addAll("All", "asd") ;     //默认给所有人
105             userList.setStyle("-fx-color: White") ;
106             userList.setValue("All") ;
107             tf.setAlignment(Pos.BOTTOM_LEFT) ;
108             tf.setPrefColumnCount(30);
109             hBox.getChildren().addAll(userList, tf) ;
110 
111             pane.getChildren().add(hBox) ;
112             Scene charScene = new Scene(pane, 400, 300) ;
113             primaryStage.setTitle("Chatting") ;
114             primaryStage.setScene(charScene) ;
115             primaryStage.show() ;
116 
117 
118 
119 //=====================================后面暂时没写============
120             //登陆之后,给成员name初始化
121             this.name = tfForName.getText() ;
122             String hostName = tfForService.getText() ;
123             System.out.println(name);
124             System.out.println("抱歉, 我还没有写逻辑代码..") ;
125             /**
126             //连接服务器
127             try {
128                 this.socket = new Socket(hostName, 5210) ;
129 
130             } catch (Exception ex) {
131                 ex.printStackTrace() ;
132             }
133              **/
134 
135         }) ;
136     }
137 }

//------------------------------------------------------------


 


 

转载于:https://www.cnblogs.com/jffx/p/9807949.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爱好-摩托车:铃木

ylbtech-爱好-摩托车&#xff1a;铃木1.返回顶部 2.返回顶部3.返回顶部4.返回顶部5.返回顶部 1、http://www.suzuki-china.com/motor/2、6.返回顶部作者&#xff1a;ylbtech出处&#xff1a;http://ylbtech.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#x…

vue面试题,知识点汇总(有答案)

一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法&#xff0c;在新旧nodes对比时辨识VNodes。如果不使用key&#xff0c;Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key&#xff0c;它会基于…

EF中Take和Skip的区别

以例子来说明&#xff1a; 数据库中Orders表如下&#xff1a; 代码部分&#xff1a; 运行结果&#xff1a; 可以看出&#xff1a;Take()方法的作用是从查询结果中提取前n个结果&#xff1b;而Skip()方法则是跳过前n个结果&#xff0c;返回剩余的结果。转载于:https://www.cnblo…

详解Vuex常见问题、深入理解Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 状态&#xff1f;我把它理解为在data中的属性需要共享给其他vue组件使用的部分&#xff0c;就叫做状态。简单的…

Mac OS Git 安装

一、Git是一个分布式的代码版本管理工具。类似的常用工具还有SVN,CVS。最大的特点也是优点在于提供分布式的代码管理 1、分支代码只有一份&#xff01; 使用过svn的童鞋想必都知道&#xff0c;当我们要开发一个新功能或者增加一个新版本或者修改一个复杂bug的时候&#xff0c…

JS对象与jQuery对象

JS对象大致可以分为三种&#xff0c;如下图&#xff1a; JS常用内置对象&#xff08;JS自身所持有的对象&#xff0c;不需要创建&#xff0c;直接可用&#xff09;&#xff1a; String&#xff1a;API跟java的字符串API大致相同 两种创建对象的方式&#xff1a;String s1 “…

Nginx Slab内存管理

L38 Slub内存管理适用 ngx_http_limit_conn_module、ngx_http_limit_req_module 模块场景 我们可以用阿里第三方模块Slab_Stat模块 并且用add-module 方式编译进openresty中 转载于:https://www.cnblogs.com/jackey2015/p/10684151.html

Node.js异步库async

async的使用需要安装第三方包 1.串行无关联 async.series 函数依次执行,后面不需要调前面步骤的结果 程序执行时间为所有步骤之和 2.并行无关联 async.paraller 某步出错不影响其他步骤执行 程序执行时间为最长的那个时间 3.串行有关联 async.waterfall 函数依次执行,后面需要…

vue的双向绑定原理及实现

前言 使用vue也好有一段时间了&#xff0c;虽然对其双向绑定原理也有了解个大概&#xff0c;但也没好好探究下其原理实现&#xff0c;所以这次特意花了几晚时间查阅资料和阅读相关源码&#xff0c;自己也实现一个简单版vue的双向绑定版本&#xff0c;先上个成果图来吸引各位&a…

作业——8

这个作业属于哪个课程C语言程序设计Ⅱ这个作业的要求在哪里C语言作业评价标准我在这个课程的目标是指针与字符串这个作业在哪个具体方面帮助我实现目标使用指针与字符串参考文献指针和字符串&#xff08;基础知识&#xff09;第七周作业 一 1 、使用函数删除字符串中的字符 输入…

Vue实现组件props双向绑定解决方案

注意&#xff1a; 子组件不能直接修改prop过来的数据&#xff0c;会报错 方案一&#xff1a; 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本&#xff0c;emit一个函数 通知到组件外 HelloWorld组件代码如下…

Flask系列06--(中间件)Flask的特殊装饰器 before_request,after_request, errorhandler

一.使用 Flask中的特殊装饰器(中间件)方法常用的有三个 app.before_request # 在请求进入视图函数之前app.after_request # 在请求结束视图函数之后 响应返回客户端之前app.errorhandler(404) # 重定义错误信息before_request def func():passafter_request def func(ret): # …

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

最近看了很多这方面的文章&#xff0c;能搜到的基本看了个遍&#xff0c;但感觉还是似懂非懂&#xff0c;知道这个东西&#xff0c;很难说出这是个什么东西&#xff0c;先整理一些概念&#xff0c;慢慢消化&#xff0c;以后慢慢探索其中的原因。 1、PX(CSS pixels) 1.1 定义 …

【转】10条你不可不知的css规则

10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 &#xff1a;【译】10条你不可不知的css规则正文&#xff1a; Published December 6th, 2004 in CssStaff Tags: No Tags. 原文地址&#xff1a;Ten CSS Tricks You May not Know k…

Python 面向对象【1】

对象 属性 方法面向对象特征&#xff1a;分装 继承 多态【不同对象对同一方法响应不同行动】类定义class xxx:........类对象类对象支持两种操作&#xff1a;属性引用和实例化 属性引用 使用和 Python 中所有的属性引用一样的标准语法&#xff1a;类对象名.属性名 类对象创建…

福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)

1、队伍信息&#xff1a; 队伍名称&#xff1a;彳艮彳亍团队 学号名本次作业博客链接031602219奇豪(队长)https://www.cnblogs.com/S031602219/p/9822576.html041602209毓明http://www.cnblogs.com/mingsonic/p/9820702.html041602204水源http://www.cnblogs.com/littlenorthwe…

【转发】实现yolo3模型训练自己的数据集总结

原文链接&#xff1a;实现yolo3模型训练自己的数据集总结 经过两天的努力&#xff0c;借鉴网上众多博客&#xff0c;在自己电脑上实现了使用yolo3模型训练自己的数据集并进行测试图片。本文主要是我根据下面参考文章一步步实施过程的总结&#xff0c;可能没参考文章中那么详细&…

Django Form和ModelForm组件

Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时&#xff0c;都会写一些获取用户输入的标签并且用form标签把它们包起来。 与此同时我们在好多场景下都需要对用户的输入做校验&#xff0c;比如校验用户是否输入&#xff0c;输入的长度和格式等正不正确。如果用户输…

ESLint 规则详解

前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint&#xff0c;极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速&#xff0c;是几乎每个前端项目都必备的辅助工具。可是&#xff0c;这么多规则&#xff0c;每…

全文搜索引擎 ElasticSearch 还是 Solr?

原文链接 最近项目组安排了一个任务&#xff0c;项目中用到了全文搜索&#xff0c;基于全文搜索 Solr&#xff0c;但是该 Solr 搜索云项目不稳定&#xff0c;经常查询不出来数据&#xff0c;需要手动全量同步&#xff0c;而且是其他团队在维护&#xff0c;依赖性太强&#xff0…