文章16 | 阅读 8764 | 点赞0
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocketAPI也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
WebSocket 是独立的、创建在 TCP 上的协议。
Websocket 通过HTTP/1.1 协议的101状态码进行握手。
为了创建Websocket连接,需要通过浏览器发出请求,之后服务器进行回应,这个过程通常称为“握手”(handshaking)。
新建项目:springboot-webservice,pom.xml
<dependencies>
<!--websocket-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.22</version>
</dependency>
</dependencies>
新建配置类, 开启WebSocket支持:WebSocketConfig.java
/**
* 开启WebSocket支持
**/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
新建WebSocketServer服务端:WebSocket.java
@ServerEndpoint("/websocket")
@Component
@Slf4j
public class WebSocket {
//与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
//concurrent包的线程安全Set,用来存放每个客户端对应的WebSocket对象。
private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>();
/**
* 建立连接成功
* @param session
*/
@OnOpen
public void onOpen(Session session){
this.session=session;
webSocketSet.add(this);
log.info("【websocket消息】 有新的连接,总数{}",webSocketSet.size());
}
/**
* 连接关闭
*/
@OnClose
public void onClose(){
this.session=session;
webSocketSet.remove(this);
log.info("【websocket消息】 连接断开,总数{}",webSocketSet.size());
}
/**
* 接收客户端消息
* @param message
*/
@OnMessage
public void onMessage(String message){
log.info("【websocket消息】 收到客户端发来的消息:{}",message);
}
/**
* 发送消息
* @param message
*/
public void sendMessage(String message){
log.info("【websocket消息】 发送消息:{}",message);
for (WebSocket webSocket:webSocketSet){
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
注:@ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址。
onOpen 和 onClose 方法分别被@OnOpen和@OnClose 所注解。这两个注解的作用不言自明:他们定义了当一个新用户连接和断开的时候所调用的方法。
onMessage 方法被@OnMessage所注解。这个注解定义了当服务器接收到客户端发送的消息时所调用的方法。
编写index.html文件来测试通讯:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="name" /><button onclick="send()">发送消息</button>
</body>
<script>
var websocket = null;
//判断浏览器是否支持websocket
if('WebSocket' in window) {
//实现化WebSocket对象
websocket = new WebSocket("ws://localhost:8080/websocket");
} else {
alert('该浏览器不支持websocket')
}
//打开事件
websocket.onopen = function(event) {
console.log('建立连接');
}
//关闭事件
websocket.onclose = function(event) {
console.log("连接关闭");
}
//获得消息事件
websocket.onmessage = function(event) {
console.log("收到消息:" + event.data);
}
//发生了错误事件
websocket.onerror = function(event) {
console.log("websocket 通信发生错误");
}
window.onbeforeunload = function(event) {
websocket.close();
}
//发送消息
function send() {
var message = document.getElementById('name').value;
websocket.send(message);
}
</script>
</html>
编写访问接口模仿服务端消息推送场景:
@Controller
public class TestController {
@Resource
private WebSocket webSocket;
/**
* 页面文件入口
*/
@GetMapping("/index")
public String index(){
return "index";
}
/**
* 发送场景模拟
* @param msg
* @return
*/
@GetMapping("/test")
@ResponseBody
public String sendMessage(String msg){
//如果访问的地址中msg参数不为空值,发送msg的值给前端
if(!StringUtils.isEmpty(msg)){
webSocket.sendMessage(msg);
return "服务端发送消息msg:"+msg;
}
return "服务端未发送消息msg:"+msg;
}
}
启动项目。首先我们先测试客户端发送消息。访问:localhost:8080/index,浏览器控制台与后台控制台:
如果你再开浏览器窗口访问,连接总数就会跟着变话。接下来我们发送一条消息:
测试服务端发送消息:访问:localhost:8080/test,未带msg参数,websocket无变化:
带入msg参数访问(注意你的页面别关闭哦!)
最后具体应用场景还得根据业务来定!
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/xu12387/article/details/88818278
内容来源于网络,如有侵权,请联系作者删除!