使⽤websocket让服务器端给客户端推数据
使⽤websocket让服务器端给客户端推数据
1 背景
最近对websocket⽐较感兴趣，⼀直在想http都是客户端向服务端主动发请求，然后进⾏数据交互。但是如何让服务器端主动向客户端发送数据或者推送事件呢？
很神奇，⽐较好奇，带着这样的疑问，就来简单了解下websocket。
准备分三步学习：
快速使⽤springboot搭建⼀个dome，先感受websocket的神奇
做⼀个1对1（好友聊天），1对多（聊）的demo
分析源码
本篇⽂章做第⼀步，使⽤springboot搭建⼀个dome
2 搭建dome
2.0 项⽬结构
2.1 创建⼀个springboot项⽬
例如：我创建了⼀个名为websocket的项⽬；包名为com.wllfengshu
2.2 添加maven依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="/POM/4.0.0"xsi="/2001/XMLSchema-instance"
schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.4.RELEASE</version>
<relativePath/><!-- lookup parent from repository -->
</parent>
<groupId>com.wllfengshu</groupId>
<artifactId>websocket</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>websocket</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!--添加websocket依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2.3 开启WebSocket⽀持
package com.figs;
import t.annotation.Bean;
import t.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* 开启WebSocket⽀持
* @author
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
2.4 消息推送
有两种办法，⼀是：直接把ServerEndpoint当作⼀个控制器，加上⼀个@RestController注解即可；⼆是：把ServerEndpoint当作⼀个组件，加上⼀个@Component注解，然后在业务层调⽤。具体的可以看参考⽂献，他们都写的很好。（⾄于使⽤的⽅式太⿇烦，暂不研究）
本⽂列举第⼀种，后期的“聊天”功能也基于第⼀种⽅法
package com.st;
import urrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RestController;
//这⾥的/webSocket/{id}/{name}只是拦截的url，不⼀定要是这个，你写/aaa也是⾏的
@ServerEndpoint("/webSocket/{id}/{name}")
@RestController
public class TestWebSocket {
/**
*  ⽤来记录当前连接数的变量
*/
private static volatile int onlineCount =0;
/**
*  concurrent包的线程安全Set，⽤来存放每个客户端对应的WebSocket对象
*/
private static CopyOnWriteArraySet<TestWebSocket> webSocketSet =new CopyOnWriteArraySet<>();
/**
* 与某个客户端的连接会话，需要通过它来与客户端进⾏数据收发
*/
private Session session;
private static final Logger logger = Logger(TestWebSocket.class);
@OnOpen
public void onOpen(Session session,@PathParam("id")long id,@PathParam("name") String name)throws Exception { this.session = session;
System.out.println(Id());
webSocketSet.add(this);
logger.info("Open a websocket. id={}, name={}", id, name);
}
@OnClose
public void onClose(){
logger.info("Close a websocket. ");
}websocket和socket
@OnMessage
public void onMessage(String message, Session session){
logger.info("Receive a message from client: "+ message);
try{
//接受到客户端信息后，⽴即回复“我是服务器，收到数据了”
sendMessage("我是服务器，收到数据了");
}catch(Exception e){
<("Error sendMessage. ", e);
}
}
@OnError
public void onError(Session session, Throwable error){
<("Error while websocket. ", error);
}
// 发送消息
public void sendMessage(String message)throws Exception {
if(this.session.isOpen()){
BasicRemote().sendText(message);
}
}
public static synchronized int getOnlineCount(){
return onlineCount;
}
public static synchronized void addOnlineCount(){
}
public static synchronized void subOnlineCount(){
}
}
2.5 前端发起socket连接请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="cdn.bootcss/jquery/1.9.1/jquery.min.js"></script>
<title>Java后端WebSocket实现</title>
</head>
<body>
信息框:<input id="text"type="text"/>
<button onclick="send()">发送</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
收到的信息如下:</br>
<div id="message">
</div>
</body>
<script type="text/javascript">
if(typeof(WebSocket)=="undefined"){
alert("您的浏览器不⽀持WebSocket");
}
var webSocket =new WebSocket("ws://127.0.0.1:8080/webSocket/1/liang");
//连接发⽣错误的回调⽅法
setMessageInnerHTML("WebSocket连接发⽣错误");
};
//连接成功建⽴的回调⽅法
setMessageInnerHTML("WebSocket连接成功");
}
//接收到消息的回调⽅法
setMessageInnerHTML(event.data);
}
/
/连接关闭的回调⽅法
setMessageInnerHTML("WebSocket连接关闭");
}
//监听窗⼝关闭事件，当窗⼝关闭时，主动去关闭webSocket连接，防⽌连接还没断开就关闭窗⼝，server端会抛异常。    beforeunload=function(){
closeWebSocket();
}
//关闭WebSocket连接
function closeWebSocket(){
webSocket.close();
}
//发送消息
function send(){
var message =$('#text').val();
webSocket.send(message);
$("#text").val("");
}
//将消息显⽰在⽹页上
var val ="";
function setMessageInnerHTML(innerHTML){
var temp ='<br/>'+ innerHTML +'<br/>';
val = val + temp;
$("#message").html(val);
}
</script>
</html>
2.6 原理图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。