上篇文章【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分，如果小伙伴没有积分，文末留言我发给你。）
关注公众号【江南一点雨】，专注于 Spring Boot+微服务以及前后端分离等全栈技术，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！
以上。。
WebSocket刨根问底(二)的更多相关文章
-
WebSocket刨根问底(四)之五子棋大战江湖
有暇,做了个五子棋大战的小游戏送给各位小伙伴! 用到的知识点有: 1.JavaWeb基础知识(懂jsp,servlet足够) 2.JavaScript和jQuery基本用法 3.了解WebSocket ...
-
WebSocket刨根问底(三)之群聊
前两篇文章[WebSocket刨根问底(一)][WebSocket刨根问底(二)]我们介绍了WebSocket的一些基本理论,以及一个简单的案例,那么今天继续,我们来看一个简单的群聊的案例,来进一步了 ...
-
websocket之二：WebSocket编程入门
一.WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...
-
WebSocket 介绍(二)-WebSocket API
这一章介绍如何用WebSocket API来控制协议和创建应用,运用http://websocket.org 提供的现有WebSocket服务器,我们可以收发消息.创建一些简单的WebSocket应用 ...
-
websocket（二） websocket的简单实现，识别用户属性的群聊
没什么好说的,websocket实现非常简单,我们直接看代码. 运行环境:jdk8 tomcat8 无须其他jar包. 具体环境支持自己百度 package com.reach.socketContr ...
-
WebSocket刨根问底(一)
年初的时候,写过两篇博客介绍在Spring Boot中如何使用WebSocket发送消息[在Spring Boot框架下使用WebSocket实现消息推送][在Spring Boot框架下使用WebS ...
-
Sword websocket分析二
//websocket发送数据 int send(uint8_t* message, uint64_t message_size) { //掩码 ] = { 0x12, 0x34, 0x56, 0x7 ...
-
WebSocket教程(二)
运行环境:jdk8 tomcat8 无须其他jar包. package com.reach.socketController; import java.io.IOException; import j ...
-
WebSocket（二）-WebSocket、Socket、TCP、HTTP区别
原文地址:Socket 与 WebSocket 1. 概述 WebSocket 是为了满足基于 Web 的日益增长的实时通信需求而产生的.在传统的 Web 中,要实现实时通信,通用的方式是采用 HTT ...
随机推荐
-
shujuk
数据库管理的目标:在适当的时候以适当的形式向适当的人提供适当的数据. 2. 数据管理的内容:组织业务的管理(学生的信息) :技术的管理(数据库的建立等) 3. 数据库管理的发展阶段:人工,文件,数据库 ...
-
罗技 UE3100 蓝牙耳机使用
罗技 UE3100 蓝牙耳机使用内置麦克风 蓝牙2.1蓝牙功能 和 手机 .平板 . 电脑 连接.开关 长按 5秒 开机 指示灯变成绿色并闪烁 此时耳机处于待蓝牙设备搜索状态当 智能手机 搜索 蓝牙设 ...
-
paip.提升效率--调试--日志系统日志参数含义---python
paip.提升效率--调试--日志系统日志参数含义---python #同时向控制台和文件输出日志 #日志参数含义 import logging log_format = '%(filename)s ...
-
【WPF】FillRule
获取或设置如何组合此 GeometryGroup 中所包含对象的相交区域. Dependency property identifier field: FillRuleProperty FillRul ...
-
添加iis的wolf、wolf2、json支持
1.打开“mime类型”,添加: 如下“文件扩展名”和“mime类型”: .woff application/x-font-woff .woff2 applic ...
-
[GitHub]第三讲：简单分支操作
Git 最核心的操作对象是版本( commit ),最核心的操作技巧就是分支. 什么是分支? 仓库创建后,一旦有了新 commit,默认就会放到一个分支上,名字叫 master.前面咱们一直看到的多个 ...
-
MongoDB语法与现有关系型数据库SQL语法比较
MongoDB语法 MySql语法 db.test.find({'name':'foobar'}) <==> select ...
-
mysql-5.7.20
. 下载mysql- wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.20-linux-glibc2.12-i686.tar. ...
-
unigui ShowModal、MessageDlg
procedure Calback(Sender: TComponent; AResult: Integer);procedure TForm.Calback(Sender: TComponent; ...
-
C语言 &#183; 组合数
组合数 从4个人中选2个人参加活动,一共有6种选法. 从n个人中选m个人参加活动,一共有多少种选法?下面的函数实现了这个功能. 请仔细分析代码,填写缺少的部分(下划线部分). 注意:请把填空的答案(仅 ...