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

第一步、引入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>

到这里 结束 总体上来说 很简单 玩一次后面就会了