前端代碼
<!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