Spring RE 19 Websocket简单折腾-柚子小站

WebSocket的简单使用, 找了个教程做了一下, 发现还是挺有意思的. 这里就直接记录下来怎么折腾的: 首先需要配置开启WebSocket:

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

@Configuration
public class WebSocketConfig {

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

有了ServerEndpointExporter的支持, 就能够在控制器中开启WebSocket, 然后配置对应的注解与路径, 就可以将那个路径变成WebSocket协议:

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

@Controller
@ServerEndpoint("/test")
public class WebSocketServer {

    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("有新客户端连接: " + session.getId());
        clients.put(session.getId(), session);
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("有用户断开了, id为:" + session.getId());
        clients.remove(session.getId());
    }

    @OnError
    public void onError(Throwable throwable) {
        throwable.printStackTrace();
    }

    @OnMessage
    public void onMessage(String message) {
        System.out.println("接收到的Message是: " + message);
        this.sendAll(message);
    }

    private void sendAll(String message) {
        for (Map.Entry<String, Session> sessionEntry : clients.entrySet()) {
            sessionEntry.getValue().getAsyncRemote().sendText(message);
        }
    }
}

这段代码也比较清楚, 就是每来一个新连接, 就把连接号和对应的连接对象放到一个Map中, 之后群发消息的时候遍历这个对象然后进行发送. 之后是前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TITLE</title>
    <style>
        .message {
            border: 1px solid black;
            width: 300px;
            height: 200px;
        }

    </style>
</head>
<body>

    <input type="text" class="message" id="message">
    <div class="message" id="result">

    </div>

<button id="send">button</button>

<script type="text/javascript">
    var start = false;
    var url = "ws://localhost:8080/test";
    var sock = new WebSocket(url);

    sock.onopen = function () {
        console.log("开启连接");
        sayHello();

    };

    sock.onmessage = function (e) {
        console.log("接受消息" + e.data);
        if (start) {
            document.getElementById("result").innerHTML = (new Date() + "<br>" + e.data);
        }
        start = true;

    };

    sock.onclose = function () {
        console.log("关闭连接")
    };

    function sayHello() {
        var text = document.getElementById("message").value;
        document.getElementById("message").value = "";
        console.log("发送消息" + text);
        sock.send(text);
    }

    document.getElementById("send").addEventListener("click", sayHello);

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

这里用了一个框输入消息, 一个框展示接收到的消息, 原理都很简单. 没有想到WebSocket如此简单好用. 以后可以尝试在Web中使用一下WebSocket了. 基本上Spring 4.x 的内容都看完了, 这次主要是从原理角度重新过了一遍, 框架其实就是一本说明书很厚的工具, 知道如何在框架的内部把框架的流程替换成自己的就可以了. 下一步就是再次回到数据结构和算法上来了, 估计要用C语言和Java同时来操作一下了. 先从Java的数据结构好好学起吧.