WebSocket

2022-08-07 18:26:26

前提

网站的消息如何实现？

WebSocket
思考： 像这样的消息功能怎么实现？
如果网页不刷新，服务端有新消息如何推送到游览器？
解决方案，采用轮询的方式。即：通过js不断请求服务器，查看是否有新的数据，如果有就获取新数据。

问题：如果服务器一直没有新的数据，那么js也是需要一直的轮询查询数据，这就是一种资源的浪费。那么websocket技术来解决。

什么是websocket

Websocket是HTML5一种新的协议。它实现游览器与服务器全双工通信。一开始握手需要借助HTTP请求完成。WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术。它是一种在单个tcp连接上进行双工通信协议。Websocket通信协议与2011年被IETF定义标准RFC6455,WebSocket API被w3c定义为标准。

全双工和单工的区别？

  • 全双工（Full Duplex）是通讯传输的一个术语。通信允许数据在两个方向上同时传输，它在能力上相当
    于两个单工通信方式的结合。全双工指可以同时（瞬时）进行信号的双向传输（A→B且B→A）。指
    A→B的同时B→A，是瞬时同步的。
  • 单工、半双工（Half Duplex），所谓半双工就是指一个时间段内只有一个动作发生，举个简单例子，
    一条窄窄的马路，同时只能有一辆车通过，当目前有两辆车对开，这种情况下就只能一辆先过，等到头
    儿后另一辆再开，这个例子就形象的说明了半双工的原理。早期的对讲机、以及早期集线器等设备都是
    基于半双工的产品。随着技术的不断进步，半双工会逐渐退出历史舞台。

http 和 websocket的区别

http

http协议是短连接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接
WebSocket

websocket

websocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个tcp链接进行通信。
WebSocket

游览器支持情况

查看：https://caniuse.com/?search=websocket
WebSocket

服务器支持情况：Tomcat 7.0.47+以上才支持。

快速入门

  1. 创建工程添加pom
<packaging>war</packaging>

    <dependencies>
        <dependency>
        <groupId>javax</groupId>
        <artifactId>javaee-api</artifactId>
        <version>7.0</version>
        <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- java编译插件 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <!-- 配置Tomcat插件 -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>8082</port>
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>

websocket的相关注解说明

  • @ServerEndpoint（"/websocket/{uid}"）

    • 声明这是一个websocket服务
    • 需要指定访问服务的地址，在地址可以指定参数，需要通过{}进行占位

  • @OnOpen

    • 用法：public void onOpen(Session session, @PathParam("uid") String uid) throws
      IOException{}
    • 该方法将在建立连接后执行，会传入session对象，就是客户端与服务端建立的长连接通道
    • 通过@PathParam霍如url声明的参数

  • @OnClose

    • 用法：public void onClose（）{}
    • 该方法是在连接关闭后执行

  • @OnMessage

    • 用法：public void onMessage(String message, Session session) throws IOException {}
    • 该方法用于接收客户端发来的消息
    • message：发来的消息数据
    • session：回话对象（也是通道）

  • 发送消息到客户端

    • 用法：session.getBasicRemote().sendText("你好”);
    • 通过session进行发送。
  1. 实现websocket服务
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;

@ServerEndpoint("/websocket")
public class MyWebSocket {

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "uid") String uid) throws IOException {
        System.out.println("websocket已经连接" + session);
        // 给客户端响应，欢迎登陆（连接）系统
        session.getBasicRemote().sendText(uid + "，你好！欢迎登陆系统");
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("websocket已经关闭" + session);
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("收到客户端发来的消息 --> " + message);

        try {
            Thread.sleep(200);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        //给客户端一个反馈
        session.getBasicRemote().sendText("消息已收到");
    }
}

编写js客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    const socket = new WebSocket("ws://localhost:8082/websocket/1");
    socket.onopen = (ws) => {
        console.log("建立连接", ws);
    }
    socket.onmessage = (ws) =>{
        console.log("接收到消息 >> ",ws.data);
    }
    socket.onclose = (ws) =>{
        console.log("连接已断开！", ws);
    }
    socket.onerror = (ws) => {
        console.log("发送错误！", ws);
    }

    // 2秒后向服务端发送消息
    setTimeout(()=>{
        socket.send("发送一条消息试试");
    },2000);

    // 5秒后断开连接
    setTimeout(()=>{
        socket.close();
    },5000);

</script>
</body>
</html>

测试：
WebSocket

SpringBoot整合WebSocket

spring对WebSocket做了支持，下面我们看下在springboot中如何使用。

导入依赖

  <packaging>war</packaging>

    <dependencies>
        <!--<dependency>-->
            <!--<groupId>javax</groupId>-->
            <!--<artifactId>javaee-api</artifactId>-->
            <!--<version>7.0</version>-->
            <!--<scope>provided</scope>-->
        <!--</dependency>-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- java编译插件 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <!-- 配置Tomcat插件 -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>8082</port>
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>

编写WebSocketHandler

在Spring中处理消息的具体业务逻辑需要实现webSockethandler接口。

package cn.itcast.websocket.spring;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;

@Component
public class MyHandler extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message)
            throws IOException {
        System.out.println("获取到消息 >> " + message.getPayload());

        // 向客户端发送消息
        session.sendMessage(new TextMessage("消息已收到"));

        if(message.getPayload().equals("10")){
            for (int i = 0; i < 10; i++) {
                session.sendMessage(new TextMessage("消息 -> " + i));
                try {
                    Thread.sleep(100);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws
            Exception {
        Integer uid = (Integer) session.getAttributes().get("uid");
        session.sendMessage(new TextMessage(uid+", 你好！欢迎连接到ws服务"));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status)
            throws Exception {
        System.out.println("断开连接！");
    }
}

编写配置类

package cn.itcast.websocket.spring;

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;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Autowired
    private MyHandler myHandler;

    @Autowired
    private MyHandshakeInterceptor myHandshakeInterceptor;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(this.myHandler, "/ws")
                .setAllowedOrigins("*")
                .addInterceptors(this.myHandshakeInterceptor);
    }
}

编写启动类

package cn.itcast.websocket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

测试

WebSocket

websocket拦截器

在Spring中提供了websocket拦截器，可以在建立连接之前写些业务逻辑，比如效验登录等。

package cn.itcast.websocket.spring;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

import java.util.Map;

@Component
public class MyHandshakeInterceptor implements HandshakeInterceptor {

    /**
     * 握手之前，若返回false，则不建立链接
     *
     * @param request
     * @param response
     * @param wsHandler
     * @param attributes
     * @return
     * @throws Exception
     */
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse
            response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws
            Exception {
        //将用户id放入socket处理器的会话(WebSocketSession)中
        attributes.put("uid", 1001);
        System.out.println("开始握手。。。。。。。");
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse
            response, WebSocketHandler wsHandler, Exception exception) {
        System.out.println("握手成功啦。。。。。。");
    }
}

获取uid：
WebSocket
测试：
WebSocket

WebSocket

上一篇：html DOCTYPE，lang和charset


下一篇：EL表达式&&JSTL