springboot + websocket=demo

前端代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script type="text/javascript">
        var websocket = null;
        var host = document.location.host;
        var username = "ikong111";
        window.onbeforeunload = function () {
            console.log("window.onbeforeunload");
            closeWebSocket();
        }

        //關閉WebSocket連接
        function closeWebSocket() {
            websocket.close();
        }

        //將消息顯示在網頁上
        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        //發送消息
        function send() {
            var message = document.getElementById('text').value;
            var param = {"message": message, "To": this.username};
            websocket.send(JSON.stringify(param));
            document.getElementById('text').value = "";
        }

        function connect() {

            this.username = document.getElementById('userName').value;

            //判斷當前瀏覽器是否支持WebSocket
            if ('WebSocket' in window) {
                console.log("瀏覽器支持Websocket")
                websocket = new WebSocket('ws://' + host + '/tj-ws/' + this.username);
            } else {
                alert('當前瀏覽器 Not support websocket')
            }
            //連接發生錯誤的回調方法
            websocket.onerror = function () {
                console.log("WebSocket連接發生錯誤")
                setMessageInnerHTML("WebSocket連接發生錯誤");
            };
            //連接成功建立的回調方法
            websocket.onopen = function () {
                console.log("WebSocket連接成功")
                document.getElementById('message').append("WebSocket連接成功");
                //setMessageInnerHTML("WebSocket連接成功");
            }
            //接收到消息的回調方法
            websocket.onmessage = function (event) {
                console.log("接收到消息的回調方法")
                console.log("這是後臺推送的消息:" + event.data);
                document.getElementById('message').append("這是後臺推送的消息:" + event.data );
            }
            //連接關閉的回調方法
            websocket.onclose = function () {
                setMessageInnerHTML("WebSocket連接關閉");
            }
        }
    </script>
</head>
<body>
websocket 測試程序
<div>
    <input id="userName" type="text"/>
</div>
<div>
    <button id="btnConnect" type="button"  onclick="connect()">點我鏈接服務器</button>
</div>
<span style="color: rebeccapurple">結果:</span>
<div id="message"></div>
<br/>
<br/>
<textarea id="text"></textarea>
<br/>
<button id="btnSender" onclick="send()">點我發送</button>
</body>
</html>

後端

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.tj.demo</groupId>
    <artifactId>tj-demo-websocket</artifactId>
    <version>1.0-SNAPSHOT</version>

    <name>tj-demo-websocket</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.0.M5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- webSocket 開始-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>
        <dependency>
            <groupId>net.minidev</groupId>
            <artifactId>json-smart</artifactId>
            <version>2.3</version>
            <scope>compile</scope>
        </dependency>
        <!-- webSocket 結束-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>

    <build>
        <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
    <repositories>
        <repository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/milestone</url>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/milestone</url>
        </pluginRepository>
    </pluginRepositories>
</project>
WebSocketConfig.java
package com.tj.demo;

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

/**
 * @author ikong
 * @create 2019-09-03 14:18
 **/
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }

}
TjWebSocket.java
package com.tj.demo;


import net.sf.json.JSONObject;
import org.springframework.stereotype.Component;

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

/**
 * @author ikong
 * @create 2019-09-03 11:27
 **/
@ServerEndpoint("/tj-ws/{username}")
@Component
public class TjWebSocket {
    private static int onlineCount = 0;
    private static Map<String, TjWebSocket> clients = new ConcurrentHashMap<String, TjWebSocket>();
    private Session session;
    private String username;

    @OnOpen
    public void onOpen(@PathParam("username") String username, Session session) throws IOException {
        this.username = username;
        this.session = session;
        addOnlineCount();
        clients.put(username, this);
        System.out.println("已連接");
    }

    @OnClose
    public void onClose() throws IOException {
        clients.remove(username);
        subOnlineCount();
    }

    @OnMessage
    public void onMessage(String message) {
        try {
            JSONObject jsonTo = JSONObject.fromObject(message);
            String mes = (String) jsonTo.get("message");
            if (!jsonTo.get("To").equals("All")) {
                sendMessageTo(mes, jsonTo.get("To").toString());
            } else {
                sendMessageAll("給所有人");
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    public void sendMessageTo(String message, String To) throws IOException {
        // session.getBasicRemote().sendText(message);
        //session.getAsyncRemote().sendText(message);
        for (TjWebSocket item : clients.values()) {
            if (item.username.equals(To))
                item.session.getAsyncRemote().sendText(message);
        }
    }

    public void sendMessageAll(String message) throws IOException {
        for (TjWebSocket item : clients.values()) {
            item.session.getAsyncRemote().sendText(message);
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        TjWebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        TjWebSocket.onlineCount--;
    }

    public static synchronized Map<String, TjWebSocket> getClients() {
        return clients;
    }
}

demo源碼:https://download.csdn.net/download/philip502/11687786

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章