webSocket

WebSocket

1，导包

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

2,配置

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

3，代码

@ServerEndpoint("/webSocket/{username}")
@Component
public class Chat {

    private static int onlineCount = 0;
    private static Map<String, Chat> clients = new ConcurrentHashMap<String, Chat>();
    private Session session;
    private String username;


    @OnOpen
    public void onOpen(@PathParam("username") String username, Session session) {
        System.out.println(username);
        this.username = username;
        this.session = session;
        Chat.onlineCount++;
        clients.put(username, this);
    }

    @OnClose
    public void onClose() {
        clients.remove(username);
        Chat.onlineCount--;
    }

    @OnMessage
    public void onMessage(String message) throws IOException {
        Message message1 = JSON.parseObject(message, Message.class);
        clients.get(message1.getToName()).session.getBasicRemote().sendText(message1.getMessage());
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        System.out.println("WebSocket发生错误：" + throwable.getMessage());
    }

    public static void sendMessage(String message) {
        // 向所有连接websocket的客户端发送消息
        // 可以修改为对某个客户端发消息
        for (Chat item : clients.values()) {
            item.session.getAsyncRemote().sendText(message);
        }
    }

}

4,前端代码

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <h1 id="message"></h1>
    <input type="text" id="input">
    <button id="button">按钮</button>
    <div id="meaage">

    <script>
        $(function(){
            var Message={
            toName:'',
            message:'',
            fromName:''
        }
            let websocket = new WebSocket('ws://127.0.0.1:8080/webSocket/' + 'zhouzhanpei');
            
            //链接服务器
            websocket.onopen=function(){
                console.log('start');
            }

            $('#button').click(function(){
                var ma=$('#input').val();
                $('#message').html(ma);
                Message.toName='username';
                Message.message=ma;
                Message.fromName='zhouzhanpei';
                var json=JSON.stringify(Message);
                //发送消息
                websocket.send(json);
            });

            //接收消息
            websocket.onmessage=function(data){
                console.log(data.data);
                $('#meaage').html(data.data);
            }
        });


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