WebSocket介绍及使用&&SpringBoot集成

先聊聊websocket
一直以来,网络在很大程度上都是围绕着所谓 HTTP 的请求/响应模式而构建的。客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生。在 2005 年左右,AJAX 开始让网络变得更加动态了。但所有 HTTP 通信仍然是由客户端控制的,这就需要用户互动或定期轮询,以便从服务器加载新数据。

长期以来存在着各种技术,可让服务器得知有新数据可用时,立即将数据发送到客户端。这些技术名目繁多,例如“推送”或 Comet。最普遍的一种黑客手段是对服务器发起的链接创建假象,这称为长轮询。利用长轮询,客户端可打开指向服务器的 HTTP 连接,而服务器会一直保持连接打开,直到发送响应。服务器只要实际拥有新数据,就会发送响应(其他技术包括 Flash、XHR multipart 请求和所谓的 htmlfiles)。长轮询和其他技术非常好用,您在 Gmail 聊天等应用中经常使用它们。

但是,这些解决方案都存在一个共同的问题:它们带有 HTTP 的开销,导致它们不适用于低延迟应用。可以想象一下浏览器中的多人第一人称射击游戏,或者其他任何带有即时要素的在线游戏。
WebSocket 规范定义了一种 API,可在网络浏览器和服务器之间建立“套接字”连接。简单地说:客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据。

websocket在spring中使用通常有2种方案
第一种就是利用tomcat里的包(这里就不介绍了)
第二种就是使用spring包下的socket
这里主要介绍第二种。
第一步 引包

    <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>```

**第二步 实现WebSocket 处理器
**

package com.lq.demo.demo.mode.websocket;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.*;
import java.io.IOException;

/**
* WebSocket 处理器
*/
@Component
public class MessageWebSocketHandler implements WebSocketHandler {
private WebSocketSession session;

@Override
public void afterConnectionEstablished(WebSocketSession session) throws IOException {
    this.session = session;
    System.out.println(" create connect  success");

}

public void send() throws IOException {
    TextMessage message = new TextMessage("i'm  a  msg  from  server");
    session.sendMessage(message);
}

@Override
public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) {
    System.out.println("  accept  msg  from  client");
}

@Override
public void handleTransportError(WebSocketSession session, Throwable exception) {
    System.out.println("    connected  error ");

}

@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) {
    System.out.println("   after connectiong  closed ");
}

/**
 * Whether to process fragmented messages
 */
@Override
public boolean supportsPartialMessages() {
    return false;
}

}


**第三步**编写websocket  拦截器

package com.lq.demo.demo.mode.websocket;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;
import java.util.Map;

/**
* websocket 拦截器
*/
@Component
public class MessageWebSocketInterceptor implements HandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map


**第四步**编写websocket 配置类

package com.lq.demo.demo.mode.websocket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

/**
* websocket 配置类
*/
@Configuration
@EnableWebSocket
public class MessageWebSocketConfig implements WebSocketConfigurer {
//实例化
@Autowired
private MessageWebSocketInterceptor messageWebSocketInterceptor;
@Autowired
private MessageWebSocketHandler messageWebSocketHandler;

//注册相关
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    ///demo/webSocket 对应前端的js里的websocket(客户端)url  setAllowedOrigins("*") 允许跨域
    registry.addHandler(messageWebSocketHandler, "/demo/webSocket").setAllowedOrigins("*")
            .addInterceptors(messageWebSocketInterceptor); //添加拦截器
}

}

**第五部** 编写客户端代码 html5  原生js
var webSocket = null; if ("WebSocket" in window) { webSocket = new WebSocket('ws://localhost:8080/demo/webSocket'); } else { alert("浏览器不支持websocket"); } webSocket.onopen = function (e) { console.log("建立连接"); } webSocket.onmessage = function (e) { console.log("收到消息" + e.data); alert(e.data); } webSocket.onclose = function (e) { console.log("关闭连接"); } webSocket.onerror = function (e) { console.log(JSON.stringify(e)); }

“`

到这里就大功告成了。

猜你喜欢

转载自blog.csdn.net/qq_38844040/article/details/81751177