HTML页面和Java_html面页与JAVA通过webSocket 通讯
(原)
往常前后端通讯基本都是以ajax请求或是表单做数据交互的,这是一种无状态的http协议,如果要做tcp协议的数据交互,能想到的技术也就socket了,可如果后端是JAVA,前端如何做socket呢,在html5出来之前,只能用ajax轮询,html5中有定义了一个新的数据传输协议,webSocket,这是一种长连接协议,类似于socket,html5出来好些年了,基本主流浏览器的最新版本都支持,在js中用window.WebScoket就可以得到它,它的API很简单,这里暂不介绍,这里介绍一下对其封装的一个第三方js库,socket.io,下面来看看如何实现吧。
上面也写的很清楚了,最简单的使用方法,也就几行代码。
2、你需要知道JAVA端怎么写最方便,实现已经有第三方针对于socket.io完成了JAVA端的实现,只用引入JAR包,调用相应的API就行了,它跟socket.io有个相对应的名字,叫netty-socketio。它可以在这里下载。(https://github.com/mrniko/netty-socketio)
它的文档里也写了一大堆,实际上你如果要最快的上手,只需要这一句话就够了。
netty-socketio的1.6.6版本支持socket.io1.0以下的版本,最新版的netty-socketio支持1.0以上的socket.io版本。
(别混了概念,netty-socketio指的是JAVA端的一个JAR,socket.io指的是一个JS文件)
3.这里就以最新版本以例。
先写前端。
demo
//创建TCP连接
var socket = io.connect('http://192.168.0.104:8998');
//连接成功后会监听到
socket.on('connect',function() {
output('连接成功');
});
socket.on('connecting',function() {
output('正在连接...');
});
socket.on('disconnect',function() {
output('断开连接! ');
});
socket.on('reconnecting',function() {
output('正在重连...');
});
socket.on('reconnect',function() {
output('成功重连!');
});
socket.on('connect_failed',function() {
output('连接失败!');
});
//想要断开连接调用此方法
function sendDisconnect() {
socket.disconnect();
}
//下面的testMessage是自定义的。
socket.emit('testMessage', 'Hello',function(){
output('' + data + '');
});
//socket.emit('testMessage', '你好',function(){
//output('' + data + '');
//});
//这里是监听服务端返回的testMessage事件
//socket.on('testMessage',function(data){
// output('' + data + '');
//});
function output(message) {
var currentTime = "" + new Date().toLocaleString() + "";
var element = $("
");
$('body').prepend(element);
}
我们叫这个页面为demo.html
然后再写JAVA后端
只需要二个类,一个是开启socket服务的类,一个是监听的类,这里只监听客户端的连接,断开和发送testMessage消息。
packagecom.ewin.ccr;importcom.corundumstudio.socketio.AckRequest;importcom.corundumstudio.socketio.SocketIOClient;importcom.corundumstudio.socketio.SocketIOServer;importcom.corundumstudio.socketio.listener.ConnectListener;importcom.corundumstudio.socketio.listener.DataListener;importcom.corundumstudio.socketio.listener.DisconnectListener;public class SocketListener implements ConnectListener ,DisconnectListener,DataListener{privateSocketIOServer server;publicSocketListener(SocketIOServer server){this.server =server;
}
@Overridepublic voidonConnect(SocketIOClient client) {
Integer clientSize=server.getAllClients().size();
System.out.println("刚连上一个客户端,总共有" + clientSize + "客户端连接成功。");
}
@Overridepublic voidonDisconnect(SocketIOClient client) {
Integer clientSize=server.getAllClients().size();
System.out.println("刚离开一个客户端,总共有" + clientSize + "客户端连接成功。");
}
@Overridepublic voidonData(SocketIOClient client, String data, AckRequest ackSender)throwsException {
System.out.println("刚有一个数据从客户端过来" +data);
ackSender.sendAckData("服务端消息收到!-----");
}
}
以上为监听类
packagecom.ewin.ccr;importcom.corundumstudio.socketio.Configuration;importcom.corundumstudio.socketio.SocketIOServer;importcom.ewin.ccr.util.SocketConfig;public classSocketServer {public static voidmain(String[] args) {
Configuration config= newConfiguration();
config.setHostname(SocketConfig.getValue("host"));
config.setPort(Integer.parseInt(SocketConfig.getValue("port")));
SocketIOServer server= newSocketIOServer(config);
SocketListener socketListener= newSocketListener(server);//客户端连接上时触发
server.addConnectListener(socketListener);//监听客户端消息//工单产品执行监控表头数据,只发一次,需要由客户端请求后发送
server.addEventListener("testMessage", String.class, newsocketListener());//客户断连接断开时触发
server.addDisconnectListener(socketListener);//启动服务
server.start();//server.stop();
}
}
以上为开启socket服务的类
运行SocketServer这个类
然后进入我们的demo页面,你会看到如下信息
后台会是这样的。
然后我们尝试关闭页面。后台会变成这样。
我们尝试关掉JAVA服务,页面会变成这样。
其实,这还没完,这里不知是BUG,还是什么原因,会有一个问题。
看到页面这个地方没有
现在我们来换一下,发送一个中文的"你好"给后台,我们需要把上面的注释取消,把下面的注释放开,改成这样
然后我们把demo.html页面刷新一下,关掉,再重开(这样是为了使修改的JS生效)
OK,前面没有问题,再看下我们的二个中文字“你好”过去没有。
看到没,后端是乱码,估计这种问题的第一反应,可能绝大数程序员想的跟我一样,转码出了问题,于是各种前后端编码,字符集的检查,但是你会发现,以前出现这种问题时,能用上的转码,切换字符集的招数都用遍了, 这里依然无效。
经过我一天的摸索,得到一个好消息与一个坏消息。
先说坏的,百度有人说是socket.io版本不够新,今天是2017年6月4号,最新版是6月2号的2.0.2版本,我试了一下最新的,问题依然存在。
好消息是我找到了问题的解决办法,但是过于暴力。
看下面这段代码:
跟刚才的本质没有变,只是延迟0.5秒发送消息,我们再次刷新demo.html页面,来看下后台的反应。
看到没,中文传送过来了。
那有人可能就要问了,如果做一个即时通讯之类的,那岂不是每次发送消息都要等上半秒钟,其实不是这样的,经过我多次的测试,只有在连接刚建立完成以后的一小段时间内发送中文才会有这个问题(上面其实是连建立后等了0.5秒发送的消息,实际上测的是延迟0.2秒以上再发送消息 ,后面收到中文的概率已经很大了),后面再发送都不会有这个问题。
HTML页面和Java_html面页与JAVA通过webSocket 通讯相关推荐
- Web页面或app等前端页面之Java Web的JSP、Servlet、Cookie、Session等技术小结
Java Web学习,掌握JSP.Servlet.Cookie.Session等内容,使用JSTL进行数据展示完成实际应用. 2.3.1 XML基础 XML的用途.语法规则.语义约束.如何解析XML, ...
- 987页的Java面试宝典,看完才发现,应届生求职也没那么难
前言 现在已经九月底,金九银十也已经过去了一大半,很明显今年的面试季明显不如往年火热,对于求职者来说,也更难了一些.马上迎来国庆节,假期一过,十月份又过去了三分之一,综合来看今年确实不是面试的最佳时期 ...
- 看完这份987页的Java面试宝典,发现应届生求职也没那么难,面试 so easy
前言 现在已经九月底,金九银十也已经过去了一大半,很明显今年的面试季明显不如往年火热,对于求职者来说,也更难了一些.马上迎来国庆节,假期一过,十月份又过去了三分之一,综合来看今年确实不是面试的最佳时期 ...
- 给SharePoint页面加入自己定义页脚Custom footer
给SharePoint页面加入自己定义页脚Custom footer 在公司做站点设计项目时,须要在页面上加入页脚. 非常多人都把页脚忽视了,认为没什么多大用处,事实上它的作用还是有的,并且还越来越显 ...
- 遭遇“HTTP 错误 500.19 无法访问请求的页面,因为该页的相关配置数据无效。”...
windows 2008下IIS7 安装ASP.NET 遇到如下错误: <!--[endif]--> HTTP 错误 500.19 - Internal Server Error 无法访 ...
- 详细说明通过kettke对csv文件转换的操作步骤_如何将多页面pdf分割成一页一页的PDF文件...
经常会有小伙伴问我,如何将多页面的PDF文件拆分成一个个的PDF文件?例如有5个页面的PDF文件,一次性拆分导出生成5个单页面的PDF文件? PDF文件是我们日常工作学习中经常要用到的,有时候PDF文 ...
- HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效。...
HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 环境信息: 操作系统:WIndows 7 x64 IIS:Interne ...
- jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结
转载自 jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结 为什么使用该功能? 项目中的每个页面都包含产品名称.Logo.版本等信息,我希望修改一处,其它所有的全部跟着变 ...
- jQuery插件实现的页面功能介绍引导页效果
查看演示 下载源码 Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pag ...
最新文章
- 从iOS证书申请到签名文件生成
- 2019年上半年收集到的中国人工智能发展详情文章
- iOS中JS 与OC的交互(JavaScriptCore.framework)
- HDU 3466 01背包变形
- html/css——注意事项
- Mesos在传统金融企业的实践——平安科技陈秋浩实录分享
- Linux如何修改用户名?
- 怎样通过DOS来提取一个文件夹下所有文件的名字
- 协议森林13 9527 (DNS协议)
- IOCP配合AcceptEx的例子
- 集合各实现类的底层实现原理
- Merge k Sorted Lists
- AppBuilder(二)UseStageMarker
- Atitit springboot helloword 最简化 attilax总结
- Http get与pos
- 关于 easyPr的问题
- 堪称最流行强大的免费开源PHP网站程序——WordPress中文正式版
- 【转】 Linkdrops:以太坊上发红包的开源标准
- MyBatis入门系列(9) -MyBatis之SQL语句构建器
- 《德鲁克管理思想精要》读书笔记2 - 企业的宗旨、目标
热门文章
- MFC怎么让图片适应picture control控件的大小
- 超级好看的ZYI官网单页html引导页网站源码
- 电子计算机机房折旧提几年,IDC设备资产运营中四种“折旧率计算”的常见方法...
- Windows10下安装MySQL
- html ajax ashx,利用ashx实现AJAX的异步数据调用
- ashx文件与ajax,ashx文件猎取$.ajax()方法发送的数据_
- 常用的MySql操作
- 2021年考研,3个月南理工计算机学硕上岸经验帖
- 产品经理视角+意志力+大创视角:外卖第二次被偷后我发现了隐藏的“新大陆”
- nuc7 可以装linux么,怎么在NUC7I7DNKE上安装最新的以太网设备驱动程序