在线聊天系统

基础知识点:

1.      Socket

2.      IO流

一、    创建客户端

1.  新建客户端类ChatClient;

2.  通过继承Frame类创建窗口;

3.  在窗口中添加可输入的文本区TextField,和显示文本区Textarea;

4.  添加窗口关闭功能,重写windowclosing方法

 

二、    创建文本区域

输入文本后,显示文本区域显示输入框中输入的内容,所以为tfTXT添加监听器,选择内部类

 

 

 

三、    创建端口连接

1.  新建客户端类ChatServer;

2.  通过ServerSocket启动服务,创建连接的端口

ServerSocket ss=new ServerSocket(8888);

3.  用accept接收客户端发来的信息

Socket s =ss.accept();

运行后启动server,但是不能多次运行,会报端口被占用bug。可以关闭server重启

 

 

 

四、    创建端口连接

在窗口打开时立刻连接服务端,建一个connect方法:

Sockets=new Socket("10.106.30.32",8888);



五、    将客户端文本框输入的数据发送到服务器端

1.  将Socket s改为全局变量,才能在TFListener中拿到Socket数据;

2.  客户端将字符串往外发送字符串

DataOutputStream doS =new DataOutputStream(s.getOutputStream());

dos.writeUTF(str);

3.  服务器端接收客户端发送的数据

DataInputStream dis =newDataInputStream(s.getInputStream());

String str=dis.readUTF();



运行结果为,客户端第一次输入hello时,服务器收到了并打印了出来,

客户端第二次输入world时,客户端报错



每次输出时我们用了dis.close,注释掉

在结束时清理资源,写一个清理资源的方法disconnect,窗口关闭时断开与服务器的连接


服务器要多次读取数据,所以需要写一个循环,或者while()函数做个判定



当服务器启动时,服务器开始接收数据

当服务器与客户端连接成功后,开始读取数据

一台客户端可以成功发送多个数据

六、    多台客户端连接服务器

多个客户端同时连接服务器端,会出现阻塞,因为readUTF();为阻塞型函数,所以需要建立多个线程,将接收客户端的线程,和处理 客户端数据的线程分开

Client()专门处理线程

 



客服功能介绍 机器人智能聊天 客服手动在线离线 用户主动向客服发送信息(信息包括文本、表情包) 客服选择会话成员,并且主动向用户发送信息(信息包括文本、表情包) 用户/客服接收到对方发送的信息 客服主动关闭用户会话,离线列表显示离线用户,用户端提示客服主动关闭会话,本次会话结束 客服手动离线,清除所有会话列表,用户端提示客服已离线,本次会话结束 客服刷新或关闭页面下线,清除所有会话列表,用户端提示客服已离线,本次会话结束 用户刷新页面或关闭页面,客服端提示用户已下线,本次会话结束 客服切换右边工具栏,选择快捷回复,可选中快捷回复信息以此快速回复内容 发送信息,如果服务器中断,信息状态为 0(未发送出),若 20 秒服务器仍为断开,信息状态改成-1(发送失败),若 20 秒内服务器恢复,信息状态改成 1(发送成功) 在用户端加入 productId,用户可发送商品卡片 客服接收用户发送的商品卡片,并且查看详情 完成图片发送,若图片过大时进行图片压缩,图片超大时不允许发送 完成图片接收,查看 用户多台设备在线时,强制另一台设备下线 客服多台设备在线时,强制旧客服端下线,并且中断会员的会话 部分功能实现:https://blog.csdn.net/weixin_42000816/article/details/112131388 如果对您对此项目有兴趣,可以点 “Star” 支持一下 谢谢! 如果有任何的疑惑或建议,请在评论中提出,欢迎评论! 后端(service 文件)运行: npm install node app.js 前端(chatroom 文件)运行: npm install npm run serve
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值