一、前言
WebSocket是一种新型的通信协议,它可以在客户端和服务端之间实现双向通信,具有低延迟、高效性等特点,适用于实时通信场景。它是一种基于TCP协议实现的全双工通信协议,使用它可以实现实时通信,不必担心HTTP协议的短连接问题。SpringBoot可以很方便的集成WebSocket实现高效实时的消息推送。
二、特点
1.WebSocket是HTML5的一种新的协议,本质上它是独立的、创建在TCP上的一种协议。
2.通过HTTP/1.1协议的101状态码进行握手。
3.为了达成WebSocket连接,需要浏览器发出请求后服务器进行回应,这个过程也称为握手。
4.WebSocket是一种持久化的协议。
5.WebSocket实现了浏览器和服务器之间全双工通信,能够更好的节省服务器资源和带宽,以此达到实时通讯的目的。
三、前端相关API
1.建立连接
使用new WebSocket(url)创建WebSocket连接。
var url = "ws://mywebsocket";
var websocket = new WebSocket(url);
2.推送消息
通过send方法向服务器发送消息。
websocket.send("hello");
3.接收服务器传过来的数据
websocket.onmessage = function (resp) {
var data = resp.data;
}
4.监听WebSocket打开事件
websocket.onopen = function (event){
// 开始通信事件
}
5.监听WebSocket关闭事件
websocket.onclose = function (event){
// 监听关闭事件
}
6.监听WebSocket关闭事件
websocket.onclose = function (event){
// 监听关闭事件
}
7.WebSocket状态
我们可以通过readyState属性来获取WebSocket对象的状态。
CONNECTION(0):表示正在连接。
OPEN(1):表示已建立连接。
CLOSING(2):表示正在关闭连接。
CLOSED(3):表示已关闭连接。
四、SpringBoot集成WebSocket
1.添加依赖
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-websocket
2.添加WebSocket配置类
package com.example.nettydemo.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @author qx
* @date 2023/12/25
* @des WebSocket配置
*/
@Configuration
public class WebSocketConfig {
/**
* 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
*/
@Bean
public ServerEndpointExporter server服务器托管网EndpointExporter() {
return new ServerEndpointExporter();
}
}
3.创建WebSocketServer类,用来进行服务端和客户端之间的交互
package com.example.nettydemo.websocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
* @author qx
* @date 2023/12/25
* @des WebSocket核心处理类
*/
@Component
@ServerEndpoint("/myWebsocket")
@Slf4j
public class WebSocketServer {
private static List sessionList;
@OnOpen
public void onOpen(Session session) {
sessionList = new ArrayList();
sessionList.add(session);
log.info("websocket建立连接成功");
}
@OnMessage
public void onMessage(String message) {
log.info("接收到客户端的数据:{}", message);
}
@OnError
public void onError(Throwable error) {
log.info("连接客户端失败:{}", error.getMessage());
}
@OnClose
public void onClose() {
log.info("websocket断开连接");
}
/**
* 实现服务端发送消息
*
* @param msg 消息内容
* @throws IOException
*/
public void sendMsg(String msg) throws IOException {
sessionList.get(0).getBasicRemote().sendText(msg);
}
}
我们用到了几个注解,分别解释一下它们的含义。
注解 |
作用 |
@ServerEndpoint |
创建一个服务端的URL,客户端通过这个URL来连接服务端 |
@OnOpen |
打开连接触发事件 |
@OnMessage |
收到接收消息事件 |
@OnClose |
关闭连接触发事件 |
@OnError |
处理发生错误的事件 |
4.创建控制服务器托管网层
package com.example.nettydemo.controller;
import com.example.nettydemo.websocket.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.io.IOException;
/**
* @author qx
* @date 2023/12/25
* @des
*/
@RestController
@RequestMapping("/websocket")
public class WebSocketController {
@Autowired
private WebSocketServer webSocketServer;
/**
* 跳转WebSocket通信页面
*/
@GetMapping("/page")
public ModelAndView toPage() {
return new ModelAndView("webSocket");
}
/**
* 服务端发送消息
*
* @param msg 消息内容
* @throws IOException
*/
@GetMapping("/send")
public void sendData(String msg) throws IOException {
webSocketServer.sendMsg(msg);
}
}
5.创建前端页面
WebSocket测试
var websocket;
if (typeof (WebSocket) === 'undefined') {
alert("您的浏览器不支持WebSocket");
} else {
// 8090是服务器的端口
websocket = new WebSocket("ws://localhost:8090/myWebsocket");
websocket.onopen = function () {
console.log("webSocket已连接")
}
websocket.onmessage = function (event) {
console.log("接收到服务器的消息:" + event.data)
}
websocket.onclose = function () {
console.log("WebSocket已关闭")
}
websocket.onerror = function () {
console.log("WebSocket发生错误")
}
}
function sendData() {
if (websocket != null) {
websocket.send($("#msg").val());
} else {
alert("您的浏览器不支持WebSocket");
}
}
6.测试
我们打开WebSocket测试页面,控制台显示已成功连接的日志。
接着我们发送数据给服务端,点击发送按钮后,服务端控制台日志显示收到来自客户端的数据。
2023-12-25 10:48:50.735 INFO 4660 --- [nio-8090-exec-4] c.e.nettydemo.websocket.WebSocketServer : 接收到客户端的数据:我是客户端数据
最后我们调用服务端发送消息给客户端的方法。
在客户端的控制台日志上我们看到了来自服务端的消息。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: 如何 使 Java、C# md5 加密的值保持一致
Java C# md5 加密值保持一致,一般是编码不一致造成的值不同 JAVA (加密:123456) C#(加密:123456) UTF-8 e10adc3949ba59abbe56e057f20f883e UTF8 e10adc3949ba59abbe56…