WebSocket刨根问底(二)
上篇文章【WebSocket刨根问底(一)】中我们对WebSocket的一些基本理论进行了介绍,但是并没有过多的涉及到一些实战的内容,今天我希望能够用几个简单的案例来向小伙伴们展示下WebSocket的一些具体用法。
WebSocket API有哪些
首先有一点小伙伴们需要明确,那就是WebSocket并不总是用在浏览器和服务器的通信中,只要任意两个使用框架编写,支持WebSocket的应用程序都可以创建WebSocket连接进行通信,基于此,许多WebSocket实现在客户端或者服务器终端工具中都是可用的,比如Java或者.NET等。我们这里主要是介绍Java WebSocket和javascript中的websocket的使用,js中websocket的使用这个好理解,就是扮演一个客户端的角色,Java中的WebSocket分两种角色,一种是Java客户端终端的WebSocket(作用类似于JavaScript中的WebSocket),还有一种角色是Java服务器终端。本文主要介绍javascript中websocket的使用以及java服务器终端中websocket的使用,java客户端使用websocket这种情形并不多见,不在本文讨论的范围之内。
JavaScript中WebSocket的使用
目前基本上只要的浏览器不是古董级的,基本上都支持WebSocket了,w3c目前已经统一了浏览器中websocket通信的标准和接口,所有的浏览器都通过WebSocket接口的实现提供WebSocket通信。举几个简单的API我们来看看:
创建一个WebSocket对象
var webSocket = new WebSocket("ws://localhost/myws");
WebSocket中几个常见属性
readyState表示当前WebSocket的连接状态,有四种不同的取值,分别是CONNECTING(0),OPEN(1),CLOSING(2)和CLOSED(3)
if(webSocket.readyState==WebSocket.OPEN){/*do something*/}
几个常见方法
webSocket.onopen=function (event) {
//连接成功时触发
}
webSocket.onclose=function (event) {
//连接关闭时触发
}
webSocket.onerror=function (event) {
//连接出错时触发
}
webSocket.onmessage=function (event) {
//收到消息时触发
}
Java服务端中WebSocket的使用
Java服务端中WebSocket 的使用有几个点需要注意下,首先Java服务端的WebSocket想要使用,你的Tomcat必须得是Tomcat7以上的版本,Tomcat7才开始了对WebSocket的支持,不过这个条件想必小伙伴们都能满足吧!Java服务端WebSocket的使用主要是有几个注解需要我们了解下用法。如下:
@ServerEndpoint("/myws")
public class WebSocketServer {
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println("收到了客户端发来的消息:" + message);
session.getBasicRemote().sendText("服务端返回:" + message);
}
@OnOpen
public void onOpen(Session session) throws IOException {
System.out.println("客户端连接成功");
}
@OnClose
public void onClose(Session session) throws IOException {
session.getBasicRemote().sendText("连接关闭");
System.out.println("连接关闭");
}
}
关于这个类我说如下几点:
1.@ServerEndPoint注解表示将该类升级为一个WebSocket服务端点 2.@OnMessage注解表示收到客户端发来的消息时触发 3.@OnOpen注解表示当客户端连接上服务端时触发 4.@OnClose注解表示当连接关闭时触发
OK,经过上面的介绍,我们对WebSocket的API已经有了一个大概的了解,那么接下来我们就来通过一个简单的案例来看看WebSocket的使用。
一个简单的互发消息的案例
创建工程
首先创建一个普通的Java Web工程,正常情况下我们创建一个Java Web工程,这个工程如下:
大家看到这个工程中是引用的Tomcat是只引用了Tomcat中的两个Jar包,websocket的jar默认情况下并没有引入,这个需要我们自己手动引入,引入方式也很简单,如下:
1.选中当前工程,右键单击,点击open module setting,打开工程的设置页面:
2.找到Tomcat文件夹下的lib包中的websocket的jar添加进来即可,如下:
3.添加之后,我们的现在的工程是这个样子的:
创建HTML页面
创建HTML页面,编写JavaScript中的websocket逻辑,页面显示如下:
首先我们点击连接按钮连接上服务端,然后再点击发送按钮向服务端发送消息,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ws页面</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<input type="button" value="连接" id="btnClick1"><br>
<input type="text" id="msg"><input type="button" value="发送" id="btnClick2">
</div>
<div id="resultDiv"></div>
<script>
var webSocket;
$("#btnClick2").click(function () {
var msg = $("#msg").val();
$("#resultDiv").append("<p>发送消息:" + msg+"</p>");
webSocket.send(msg)
});
$("#btnClick1").click(function () {
$("#resultDiv").append("<p>开始连接服务端!</p>");
webSocket = new WebSocket("ws://localhost/myws");
webSocket.onerror = function (event) {
$("#resultDiv").append("<p>onerror:" + event.data + "</p>");
}
webSocket.onopen = function (event) {
$("#resultDiv").append("<p>连接成功!</p>");
}
webSocket.onmessage = function (event) {
$("#resultDiv").append("<p>onmessage:" + event.data + "</p>");
}
});
</script>
</body>
</html>
这里涉及到的API的含义我们在上文已经介绍过,这里就不再赘述。
创建服务端
服务端也比较简单,如下:
@ServerEndpoint("/myws")
public class WebSocketServer {
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println("收到了客户端发来的消息:" + message);
session.getBasicRemote().sendText("服务端返回:" + message);
}
@OnOpen
public void onOpen(Session session) throws IOException {
System.out.println("客户端连接成功");
}
@OnClose
public void onClose(Session session) throws IOException {
session.getBasicRemote().sendText("连接关闭");
System.out.println("连接关闭");
}
}
服务端API的含义我们上文也已经介绍过了,这里我再补充一个小问题,小伙伴们可能看到我们不同的方法里边都有参数,参数的个数和类型都有差异,实际上这里的参数是可变的,这里的具体信息我们会在下一篇文章中详说,这里先这样来写。
Ok,我们的代码写完了。
部署测试
工程的运行就像普通的JavaWeb工程那样,直接运行即可,运行之后,打开html页面,效果如下:
OK,本文先说到这里,下篇文章我们再来详细介绍一个群聊的应用,继续深入使用WebSocket。
工程下载:http://download.csdn.net/download/u012702547/9954347(由于CSDN下载现在必须要积分,不得已设置了1分,如果小伙伴没有积分,文末留言我发给你。)
- Google用来处理海量文本去重的simhash算法原理及实现
- Open vSwitch系列之openflow版本兼容
- R预设配色系统及自定义色板
- SDN实战团分享(十二):Service Function Chain
- Open vSwitch系列之数据结构解析深入分析ofpbuf
- 前端自动化测试探索
- OpenStack Neutron之持续测试
- 决策树算法之----C4.5
- 趣味理解朴素贝叶斯
- 碎片化 | 第七阶段-11-小明的故事之集群、负载、并发-视频
- 碎片化 | 第五阶段-05-需求变更如何处理-视频
- 浏览器的UI线程
- 碎片化 | 第五阶段-06-BUG如何去处理-视频
- 碎片化 | 第六阶段-04-搭建nginx和Tomcat集群环境-视频
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter中Widget 、Element、RenderObject角色深入分析
- PyTorch8:损失函数
- 浅谈ThreadLocal
- 三分钟完成 ubuntu16.04初始化,Java,maven,docker环境的部署
- VMware 安装运行 deepin 虚拟机 | 体验中国深度
- 单机KVM虚拟化快照定时创建删除快照
- 批量ping脚本
- 批量ssh信任脚本
- Oracle表级备份
- Linux脚本运行报错解决方法 bad interpreter: No such file or directory
- MySQLdump里的秘密,终于被我发现了
- HTTP各种特性总览
- django查询今天,昨天,一周,分组统计月,年
- 关于 z-index,你可能一直存在误区
- Java浮点数机制及所存在的问题