WebSocket笔记+SpringBoot整合WebSocke

最新推荐文章于 2024-01-12 14:39:46 发布

ErHa_lodman

最新推荐文章于 2024-01-12 14:39:46 发布

阅读量1.8k

点赞数

分类专栏： Socket 文章标签： websocket spring boot 网络协议

本文链接：https://blog.csdn.net/ErHa_lodman/article/details/122626246

版权

Socket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

WebSocket笔记

webSocket：HTML5 WebSocket设计出来的目的就是取代轮询和长连接，使客户端浏览器具备像C/S框架下桌面系统的即时通讯能力，实现了浏览器和服务器全双工通信，建立在TCP之上，虽然WebSocket和HTTP一样通过TCP来传输数据，但WebSocket可以主动的向对方发送或接收数据，就像Socket一样；并且WebSocket需要类似TCP的客户端和服务端通过握手连接，连接成功后才能互相通信。

优点：双向通信、事件驱动、异步、使用ws或wss协议的客户端能够真正实现意义上的推送功能。

缺点：少部分浏览器不支持。

示例：社交聊天（微信、QQ）、弹幕、多玩家玩游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等高实时性的场景。

构造函数

WebSocket(url[, protocols\])返回一个 WebSocket 对象。

常量

Constant	Value
`WebSocket.CONNECTING`	`0`
`WebSocket.OPEN`	`1`
`WebSocket.CLOSING`	`2`
`WebSocket.CLOSED`	`3`

属性

WebSocket.binaryType

使用二进制的数据类型连接。
WebSocket.bufferedAmount 只读

未发送至服务器的字节数。
WebSocket.extensions 只读

服务器选择的扩展。
WebSocket.onclose

用于指定连接关闭后的回调函数。
WebSocket.onerror

用于指定连接失败后的回调函数。
WebSocket.onmessage

用于指定当从服务器接受到信息时的回调函数。
WebSocket.onopen

用于指定连接成功后的回调函数。
WebSocket.protocol 只读

服务器选择的下属协议。
WebSocket.readyState 只读

当前的链接状态。
WebSocket.url 只读

WebSocket 的绝对路径。

方法

WebSocket.close([code[, reason\]])

关闭当前链接。
WebSocket.send(data)

对要传输的数据进行排队。

事件

使用 addEventListener() 或将一个事件监听器赋值给本接口的 on*eventname* 属性，来监听下面的事件。

close

当一个 WebSocket 连接被关闭时触发。也可以通过 onclose 属性来设置。
error

当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。也可以通过 onerror 属性来设置.
message

当通过 WebSocket 收到数据时触发。也可以通过 onmessage 属性来设置。
open

当一个 WebSocket 连接成功时触发。也可以通过 onopen 属性来设置。

示例

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

SpringBoot整合WebSocket

Pom.xml文件

	<!-- websocket依赖 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

配置类

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

WebSocket服务器类

@ServerEndpoint(value = "/websocketTest/{userId}")
@Component
@Slf4j
public class TestWebSocket {
    private static Map<String,Session> userMap = new HashMap<>();

    @OnOpen//当一个 `WebSocket` 连接成功时触发
    public void onOpen(Session session, @PathParam("userId") String userId){
        userMap.put(session.getId(), session);
        log.debug("新创建连接：{}", userId);
    }

    @OnClose//当一个 `WebSocket` 连接被关闭时触发
    public void onClose(Session session){
        //关闭时从内从中移除聊天信息
        userMap.remove(session.getId());
        log.debug("连接：{}断开",session.getId());
    }

    @OnMessage//当一个 `WebSocket` 连接被关闭时触发
    public void onMessage(String message,Session session) throws IOException {
        log.debug("收到用户{}的消息{}",session.getId(),message);
        //广播形式发送消息
        Iterator<Map.Entry<String, Session>> radioBroadcast = userMap.entrySet().iterator();
        while(radioBroadcast.hasNext()){
            Map.Entry<String, Session> next = radioBroadcast.next();
            next.getValue().getBasicRemote().sendText(session.getId()+"发送消息为："+message);
        }
    }

    @OnError//当一个 `WebSocket` 连接因错误而关闭时触发
    public void onError(Session session,Throwable error){
        log.debug("用户id为:{}连接发送错误",session.getId());
        error.printStackTrace();
    }
}

前端页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
websocket Demo---- user000 <br />
<input id="text" type="text" />
<button onclick="send()"> Send </button>
<button onclick="closeWebSocket()"> Close </button>
<div id="message">   </div>
<script type="text/javascript">
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        console.log("link success");

        websocket = new WebSocket("ws://localhost:8080/websocketTest/user001");
    }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");
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
    
     //关闭连接
    function closeWebSocket(){
        websocket.close();
    }
    
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    };
</script>

</body>
</html>