java Springboot搭建websocket 服务端和html客户端代码

这块网上案例挺多的本来也不准备写但是反正也是接触到了写下来也算做个记录

第一步、引入jar包

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

springboot项目自带websocket就直接引入了

第二步、搭建websocket服务

WebSocketConfig

package com.jinfu.sdkdemo.websocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
@EnableWebSocket
public class WebSocketConfig {

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

wobsocket服务

package com.jinfu.sdkdemo.websocket;
import lombok.extern.slf4j.Slf4j;import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @ServerEndpoint 通过这个 spring boot 就可以知道你暴露出去的 websockst 应用的路径，有点类似我们经常用的@RequestMapping。比如你的启动端口是8080，而这个注解的值是ws，那我们就可以通过 ws://127.0.0.1:8080/websocket 来连接你的应用
 * @OnOpen 当 websocket 建立连接成功后会触发这个注解修饰的方法，注意它有一个 Session 参数
 * @OnClose 当 websocket 建立的连接断开后会触发这个注解修饰的方法，注意它有一个 Session 参数
 * @OnMessage 当客户端发送消息到服务端时，会触发这个注解修改的方法，它有一个 String 入参表明客户端传入的值
 * @OnError 当 websocket 建立连接时出现异常会触发这个注解修饰的方法，注意它有一个 Session 参数
 */
@ServerEndpoint("/websocket/{id}")
@Component
@Slf4j
public class WebSocketServer {/**
     * concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketController对象。
     */
    private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 接收id
     */
    private String id;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("id") String id) {
        this.session = session;
        this.id = id;
        //如果已经包含该用户id，则移除后重新加入
        if (webSocketMap.containsKey(id)) {
            webSocketMap.remove(id);
            webSocketMap.put(id, this);
        } else {
            //否则直接加入
            webSocketMap.put(id, this);
        }
    }


    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        if (webSocketMap.containsKey(id)) {
            webSocketMap.remove(id);
            log.info(">>> 用户：{}已关闭连接", id);
        } else {
            log.info(">>> 连接已关闭...");
        }
    }


    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session){
        //接收传过来的消息
        System.out.println("收到的消息："+message);
　　　　 //发送消息
　　　　 sendMessage("发送消息");
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error(">>> WebSocket出现未知错误: ");
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message){
        try {
            this.session.getBasicRemote().sendText(message);
        } catch (Exception e) {
            log.error(">>> WebSocket消息发送出现错误: ");
            e.printStackTrace();
        }
    }
}

上面websockst的服务端就搭建好了

第三步、websocket客户端，也就是前端的websocket连接

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>首页</title>
</head>
<body>
<input type="button" value="发送" onclick="send()">
<div id="title">

</div>
<!-- js部分 -->
<script type="text/javascript" th:src="@{/jquery-3.2.1.min.js}"></script>
<script>
    var ws;
    openWebSocket();
    function openWebSocket(){
        if ("WebSocket" in window) {
            //如果已经有连接，则断开并重新连接
            if (ws != null) {
                ws.close();
                ws = null;
            }
            // 创建一个 websocket
　　　　　　　var UUID = 123;
            ws = new WebSocket("ws://localhost:8080/websocket/"+UUID);
            ws.onopen = function () {
                console.log('WebSocket连接已建立')
            };
            //获得消息事件
            ws.onmessage = function (evt) {
                $("#title").html('<p>接收：'+evt.data+'</p>');
            };
            ws.onclose = function () {
                console.log('WebSocket连接已断开')
            };
        } else {
            // 浏览器不支持 WebSocket
            console.log('您的浏览器不支持 WebSocket!');
        }
    }
function send(){
        ws.send("发送一条消息");
    }</script>
</body>
</html>