java使用webSocket与前端通讯

合集 - JAVA(41)

1.Java_第一季_JAVASE_自增、单例模式、类与实例初始化过程、方法参数传递机制、递归和迭代、成员变量与局部变量2021-02-232.Java_第一季_SSM_Spring Bean的作用域、Spring事务的传播行为、Spring MVC的执行流程、2021-02-243.Java_第一季_java高级_Redis持久化、MySql何时建立索引2021-02-244.java_JUC、volatile2021-02-255.java_CAS2021-02-266.java_阻塞队列（FIFO先进先出）2021-03-107.JUC下countDownLatch、CyclicBarrier、Semaphore以及枚举的常见使用方法2021-03-058.java_锁2021-03-049.java_集合不安全2021-02-2610.Spring循环依赖2021-04-2011.AbstractQueuedSynchronizer---AQS2021-04-1912.LockSuport2021-04-1513.java_线程池7大参数_底层运行原理2021-03-1114.java_线程池三个常用方式2021-03-1115.Java_Callable<V>的基本使用2021-03-1016.java_锁_synchronized与Lock的区别2021-03-1017.java_强、软、弱、虚四大引用2021-03-1818.java_OOM2021-03-2519.JAVA-interview2021-06-0920.java_NIO2021-05-2021.java_JVM之GC2021-03-2522.java_JVM2021-03-2323.单例模式设计2021-12-2124.netty服务端、客户端简单搭建2022-01-11

25.java使用webSocket与前端通讯2022-01-11

26.java串口通讯2021-12-0327.用Java读取文件文字并语音播报2022-01-0728.Proguard-混淆2021-11-1729.Spring Security2021-12-0130.MQ2021-10-2631.spring相关面试题2021-06-2232.执行jar包2021-06-1133.Spring2021-06-0234.SpringBoot数据访问2021-05-2735.Java Stream（流）基本使用2023-12-2836.java集合工具类 Collections基本使用2023-12-2837.LocalDateTime、LocalDate、Date、String相互转化2023-12-2738.java8新特性2022-07-0939.java设计模式2021-12-2740.java springboot使用定时器2021-09-1941.MQ根据正常队列、死信队列来实现延迟队列的场景2024-08-28

收起

maven依赖

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

 

WebSocket服务

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

@Slf4j
//映射webSocket服务路径
@ServerEndpoint("/webSocket/{userId}")
@Component
public class MyWebSocket {

    private String userId;

    private Session session;

    private static Map<String,MyWebSocket> client = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(@PathParam("userId") String userId,Session session){
        log.info("新连接：{}",userId);
        if (!isEmpty(userId)){
            this.userId = userId;
            this.session = session;
            client.put(userId, this);
            log.info("现在连接的客户编码为：" + userId);
        }
    }

    /**
     * 关闭时执行
     */
    @OnClose
    public void onClose() {
        log.info("连接：{} 关闭", this.userId);
    }

    /**
     * 收到消息时执行
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到用户{}的消息:{}", this.userId, message);
        //回复用户
        session.getAsyncRemote().sendText("收到 " + this.userId + " 的消息:" + message);
    }

    /**
     * 连接错误时执行
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.info("用户id为：{}的连接发送错误", this.userId);
        error.printStackTrace();
    }

    /**
     * 消息点对点推送
     * @param message
     */
    public void sendMessageToUser(String userId,String message) {

        MyWebSocket session = client.get(userId);
        if (session != null) {
            if (session.session.isOpen()) {
                session.session.getAsyncRemote().sendText("收到 " + userId + " 的消息:" + message);
            } else {
                log.info("用户session关闭");
            }
        } else {
            log.info("用户session不存在");
        }
    }

    private static boolean isEmpty(String s) {
        return s == null || s.length() == 0 || "".equals(s)
                || "null".equalsIgnoreCase(s)
                || "undefined".equalsIgnoreCase(s);
    }

}

 

webSocketConfig

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

@Configuration
public class WebSocketConfig {

    /**
     * 启用Springboot对WebSocket的支持
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

 

前端websocket（index.html）

<!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){
        //ws://localhost:8080/webSocket/100,当前userId为100
        websocket = new WebSocket("ws://localhost:8080/webSocket/100");
        console.log("link success")
    }else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }
    console.log("-----")
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

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

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>

</body>
</html>

 

启动项目：访问

    @GetMapping("/socket")
    public void socket(String userId,String message){
        myWebSocket.sendMessageToUser(userId,message);
    }