WebSocket
2022-06-21 本文已影响0人
右耳菌
什么是WebSocket
- WebSocket是 HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
- WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket的特性
- websocket是基于HTTP协议的，或者说借用了http的协议来完成一部分握手。为了实现websocket通信，在http建立连接后，还需要进行一次“握手”的步骤。
WebSocket的特性：
- 建立在TCP协议之上，服务器端的实现比较容易。
- 与HTTP协议有着良好的兼容性。握手阶段采用HTTP协议，因此握手时不容屏蔽，能通过各种HTTP代理服务器。
- 可以发送文本，也可以发送二进制数据。
- 协议标识符是ws(如果加密，则为wss)，服务器网址就是URL。
实现一个WebSocket 的例子 （SpringBoot版本）
- 创建一个SpringBoot 项目，并且引用以下依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 创建一个html.html（src/main/resources/static/index.html）
<!DOCTYPE HTML>
<html>
<head>
<title>net My WebSocket</title>
</head>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//连接WebSocket节点
websocket = new WebSocket("ws://localhost:8080/serverForWebSocket/001");
} else {
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
setMessageInnerHTML("open");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭连接
function closeWebSocket() {
websocket.close();
}
//发送消息
function send() {
var message = document.getElementById('text').value;
console.log(message);
websocket.send(message);
}
</script>
<body>
TestWebSocket
<input id="text" type="text"/>
<input type="submit" onclick="send()">
<button οnclick="closeWebSocket()">CLOSE</button>
<div id="message"></div>
</body>
</html>
页面如下：
- 创建WebSocketConfig(src/main/java/cn/lazyfennec/websocket/config/WebSocketConfig.java)
package cn.lazyfennec.websocket.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @Author: Neco
* @Description:
* @Date: create in 2022/6/22 20:26
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
- 创建Server4WebSocket（src/main/java/cn/lazyfennec/websocket/controller/Server4WebSocket.java）
package cn.lazyfennec.websocket.controller;
import org.springframework.stereotype.Component;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* @Author: Neco
* @Description:
* @Date: create in 2022/6/22 20:27
*/
@Component
@ServerEndpoint(value = "/serverForWebSocket/{id}")
public class Server4WebSocket {
private Session session; // 是WebSocket的Session
private static CopyOnWriteArraySet<Session> webSocketSet = new CopyOnWriteArraySet<Session>();
@OnOpen //事件 --登录的人.
public void onopen(Session session) {
this.session = session;
System.out.println("seesionId为" + session.getId());
webSocketSet.add(session);
System.out.println("当前的连接数量为:" + webSocketSet.size());
}
@OnMessage
public void onMessage(String msg, Session session) {
System.out.println(msg);
try {
sendMessage(msg, session);
} catch (IOException e) {
e.printStackTrace();
}
}
//推送
public void sendMessage(String msg, Session session) throws IOException {
for (Session session1 : webSocketSet) {
if (session != session1)
session1.getBasicRemote().sendText(msg);
}
}
}
- 启动并且测试
seesionId为0
当前的连接数量为:1
seesionId为1
当前的连接数量为:2
seesionId为2
当前的连接数量为:3
1
2
seesionId为3
当前的连接数量为:4
如何使用WebSocket
- 引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 配置WebSocket
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
WebSocket的事件
WebSocket API是纯事件驱动的。应用程序代码监听WebSocket对象上的事件，以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。客户端应用程序不需要轮询服务器来得到更新的数据。消息和事件将在服务器发送它们的时候异步到达。
如果觉得有收获就点个赞吧，更多知识，请点击关注查看我的主页信息哦~
