Spring boot webSocket

最新推荐文章于 2024-09-04 20:36:45 发布
最新推荐文章于 2024-09-04 20:36:45 发布
阅读量102 收藏
点赞数
文章标签： 网络 json javascript ViewUI
原文链接：https://juejin.im/post/5b2b4bf9e51d4558c6520bdc
版权

Spring boot webSocket

前几天学习了websocket 和Spring boot的结合 这里简单的做了记录，

后台工作

新建一个maven工程

<?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.daijianwei</groupId>
	<artifactId>bootscoket</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>bootscoket</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.2.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<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-test</artifactId>
			<scope>test</scope>
		</dependency>

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

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator-core</artifactId>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>sockjs-client</artifactId>
			<version>1.0.2</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>stomp-websocket</artifactId>
			<version>2.3.3</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>3.3.7</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.1.0</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>
复制代码

新建websocket的配置类

WebSocketConfig 配置类

package com.daijianwei.bootscoket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;


@Configuration
@EnableWebSocketMessageBroker
//通过EnableWebSocketMessageBroker 开启使用STOMP协议来传输基于代理(message broker)的消息,此时浏览器支持使用@MessageMapping 就像支持@RequestMapping一样。
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) { //endPoint 注册协议节点,并映射指定的URl
        registry.enableSimpleBroker("/topic");  //注册一个Stomp 协议的endpoint,并指定 SockJS协议。	
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//配置消息代理(message broker)
        registry.addEndpoint("/gs-guide-websocket").withSockJS();//广播式应配置一个/topic 消息代理
    }
}
复制代码

创建一个消息的接受类

package com.daijianwei.bootscoket.bean;


public class HelloMessage {
    private String name;

    public HelloMessage(){

    }

    public HelloMessage(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
复制代码

创建一个消息返回类

package com.daijianwei.bootscoket.bean;


public class Greeting {

    private String content;

    public Greeting(){}

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
复制代码

控制器代码

package com.daijianwei.bootscoket.controller;

import com.daijianwei.bootscoket.bean.Greeting;
import com.daijianwei.bootscoket.bean.HelloMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.HtmlUtils;


@Controller
public class GreetingController {

    @MessageMapping("/hello")//浏览器发送请求通过@messageMapping 映射/hello 这个地址。
    @SendTo("/topic/greetings")//服务器端有消息时,会订阅@SendTo 中的路径的浏览器发送消息。
    public Greeting greeting(HelloMessage message) throws InterruptedException {
        Thread.sleep(1000);
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
}
复制代码

实现前台

添加脚本

在resources地下添加app.js 和main.css 文件

app.js

var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    var socket = new SockJS('/gs-guide-websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    stompClient.send("/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});
复制代码

main.css 文件

body {
    background-color: #f5f5f5;
}

#main-content {
    max-width: 940px;
    padding: 2em 3em;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
复制代码

再添加一个index.html文件

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">WebSocket connection:</label>
                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    </button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">What is your name?</label>
                    <input type="text" id="name" class="form-control" placeholder="Your name here...">
                </div>
                <button id="send" class="btn btn-default" type="submit">Send</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
                </thead>
                <tbody id="greetings">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
复制代码

Spring boot 启动类

package com.daijianwei.bootscoket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BootscoketApplication {

	public static void main(String[] args) {
		SpringApplication.run(BootscoketApplication.class, args);
	}
}
复制代码

启动程序 访问 http://localhost:8080/index.html

Spring boot webSocket

前几天学习了websocket 和Spring boot的结合 这里简单的做了记录，

后台工作

新建一个maven工程

<?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.daijianwei</groupId>
	<artifactId>bootscoket</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>bootscoket</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.2.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<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-test</artifactId>
			<scope>test</scope>
		</dependency>

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

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator-core</artifactId>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>sockjs-client</artifactId>
			<version>1.0.2</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>stomp-websocket</artifactId>
			<version>2.3.3</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>3.3.7</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.1.0</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>
复制代码

新建websocket的配置类

WebSocketConfig 配置类

package com.daijianwei.bootscoket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;


@Configuration
@EnableWebSocketMessageBroker
//通过EnableWebSocketMessageBroker 开启使用STOMP协议来传输基于代理(message broker)的消息,此时浏览器支持使用@MessageMapping 就像支持@RequestMapping一样。
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) { //endPoint 注册协议节点,并映射指定的URl
        registry.enableSimpleBroker("/topic");  //注册一个Stomp 协议的endpoint,并指定 SockJS协议。	
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//配置消息代理(message broker)
        registry.addEndpoint("/gs-guide-websocket").withSockJS();//广播式应配置一个/topic 消息代理
    }
}
复制代码

创建一个消息的接受类

package com.daijianwei.bootscoket.bean;


public class HelloMessage {
    private String name;

    public HelloMessage(){

    }

    public HelloMessage(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
复制代码

创建一个消息返回类

package com.daijianwei.bootscoket.bean;


public class Greeting {

    private String content;

    public Greeting(){}

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
复制代码

控制器代码

package com.daijianwei.bootscoket.controller;

import com.daijianwei.bootscoket.bean.Greeting;
import com.daijianwei.bootscoket.bean.HelloMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.HtmlUtils;


@Controller
public class GreetingController {

    @MessageMapping("/hello")//浏览器发送请求通过@messageMapping 映射/hello 这个地址。
    @SendTo("/topic/greetings")//服务器端有消息时,会订阅@SendTo 中的路径的浏览器发送消息。
    public Greeting greeting(HelloMessage message) throws InterruptedException {
        Thread.sleep(1000);
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
}
复制代码

实现前台

添加脚本

在resources地下添加app.js 和main.css 文件

app.js

var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    var socket = new SockJS('/gs-guide-websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    stompClient.send("/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});
复制代码

main.css 文件

body {
    background-color: #f5f5f5;
}

#main-content {
    max-width: 940px;
    padding: 2em 3em;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
复制代码

再添加一个index.html文件

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">WebSocket connection:</label>
                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    </button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">What is your name?</label>
                    <input type="text" id="name" class="form-control" placeholder="Your name here...">
                </div>
                <button id="send" class="btn btn-default" type="submit">Send</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
                </thead>
                <tbody id="greetings">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
复制代码

Spring boot 启动类

package com.daijianwei.bootscoket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BootscoketApplication {

	public static void main(String[] args) {
		SpringApplication.run(BootscoketApplication.class, args);
	}
}
复制代码

启动程序 访问 http://localhost:8080/index.html

点击connect 链接websocket端口

同时打开另外一个窗口，访问http://localhost:8080/index.html

![](# Spring boot webSocket

前几天学习了websocket 和Spring boot的结合 这里简单的做了记录，

后台工作

新建一个maven工程

<?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.daijianwei</groupId>
	<artifactId>bootscoket</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>bootscoket</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.2.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<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-test</artifactId>
			<scope>test</scope>
		</dependency>

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

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator-core</artifactId>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>sockjs-client</artifactId>
			<version>1.0.2</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>stomp-websocket</artifactId>
			<version>2.3.3</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>3.3.7</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.1.0</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>
复制代码

新建websocket的配置类

WebSocketConfig 配置类

package com.daijianwei.bootscoket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;


@Configuration
@EnableWebSocketMessageBroker
//通过EnableWebSocketMessageBroker 开启使用STOMP协议来传输基于代理(message broker)的消息,此时浏览器支持使用@MessageMapping 就像支持@RequestMapping一样。
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) { //endPoint 注册协议节点,并映射指定的URl
        registry.enableSimpleBroker("/topic");  //注册一个Stomp 协议的endpoint,并指定 SockJS协议。	
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//配置消息代理(message broker)
        registry.addEndpoint("/gs-guide-websocket").withSockJS();//广播式应配置一个/topic 消息代理
    }
}
复制代码

创建一个消息的接受类

package com.daijianwei.bootscoket.bean;

public class HelloMessage {
    private String name;

    public HelloMessage(){

    }

    public HelloMessage(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
复制代码

创建一个消息返回类

package com.daijianwei.bootscoket.bean;


public class Greeting {

    private String content;

    public Greeting(){}

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
复制代码

控制器代码

package com.daijianwei.bootscoket.controller;

import com.daijianwei.bootscoket.bean.Greeting;
import com.daijianwei.bootscoket.bean.HelloMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.HtmlUtils;

@Controller
public class GreetingController {

    @MessageMapping("/hello")//浏览器发送请求通过@messageMapping 映射/hello 这个地址。
    @SendTo("/topic/greetings")//服务器端有消息时,会订阅@SendTo 中的路径的浏览器发送消息。
    public Greeting greeting(HelloMessage message) throws InterruptedException {
        Thread.sleep(1000);
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
}
复制代码

实现前台

添加脚本

在resources地下添加app.js 和main.css 文件

app.js

var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    var socket = new SockJS('/gs-guide-websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    stompClient.send("/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});
复制代码

main.css 文件

body {
    background-color: #f5f5f5;
}

#main-content {
    max-width: 940px;
    padding: 2em 3em;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
复制代码

再添加一个index.html文件

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">WebSocket connection:</label>
                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    </button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">What is your name?</label>
                    <input type="text" id="name" class="form-control" placeholder="Your name here...">
                </div>
                <button id="send" class="btn btn-default" type="submit">Send</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
                </thead>
                <tbody id="greetings">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
复制代码

Spring boot 启动类

package com.daijianwei.bootscoket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BootscoketApplication {

	public static void main(String[] args) {
		SpringApplication.run(BootscoketApplication.class, args);
	}
}
复制代码

启动程序 访问 http://localhost:8080/index.html

Spring boot webSocket

前几天学习了websocket 和Spring boot的结合 这里简单的做了记录，

后台工作

新建一个maven工程

<?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.daijianwei</groupId>
	<artifactId>bootscoket</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>bootscoket</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.2.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<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-test</artifactId>
			<scope>test</scope>
		</dependency>

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

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator-core</artifactId>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>sockjs-client</artifactId>
			<version>1.0.2</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>stomp-websocket</artifactId>
			<version>2.3.3</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>3.3.7</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.1.0</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>
复制代码

新建websocket的配置类

WebSocketConfig 配置类

package com.daijianwei.bootscoket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;


@Configuration
@EnableWebSocketMessageBroker
//通过EnableWebSocketMessageBroker 开启使用STOMP协议来传输基于代理(message broker)的消息,此时浏览器支持使用@MessageMapping 就像支持@RequestMapping一样。
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) { //endPoint 注册协议节点,并映射指定的URl
        registry.enableSimpleBroker("/topic");  //注册一个Stomp 协议的endpoint,并指定 SockJS协议。	
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//配置消息代理(message broker)
        registry.addEndpoint("/gs-guide-websocket").withSockJS();//广播式应配置一个/topic 消息代理
    }
}
复制代码

创建一个消息的接受类

package com.daijianwei.bootscoket.bean;


public class HelloMessage {
    private String name;

    public HelloMessage(){

    }

    public HelloMessage(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
复制代码

创建一个消息返回类

package com.daijianwei.bootscoket.bean;


public class Greeting {

    private String content;

    public Greeting(){}

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
复制代码

控制器代码

package com.daijianwei.bootscoket.controller;

import com.daijianwei.bootscoket.bean.Greeting;
import com.daijianwei.bootscoket.bean.HelloMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.HtmlUtils;


@Controller
public class GreetingController {

    @MessageMapping("/hello")//浏览器发送请求通过@messageMapping 映射/hello 这个地址。
    @SendTo("/topic/greetings")//服务器端有消息时,会订阅@SendTo 中的路径的浏览器发送消息。
    public Greeting greeting(HelloMessage message) throws InterruptedException {
        Thread.sleep(1000);
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
}
复制代码

实现前台

添加脚本

在resources地下添加app.js 和main.css 文件

app.js

var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    var socket = new SockJS('/gs-guide-websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    stompClient.send("/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});
复制代码

main.css 文件

body {
    background-color: #f5f5f5;
}

#main-content {
    max-width: 940px;
    padding: 2em 3em;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
复制代码

再添加一个index.html文件

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">WebSocket connection:</label>
                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    </button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">What is your name?</label>
                    <input type="text" id="name" class="form-control" placeholder="Your name here...">
                </div>
                <button id="send" class="btn btn-default" type="submit">Send</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
                </thead>
                <tbody id="greetings">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
复制代码

Spring boot 启动类

package com.daijianwei.bootscoket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BootscoketApplication {

	public static void main(String[] args) {
		SpringApplication.run(BootscoketApplication.class, args);
	}
}
复制代码

启动程序 访问 http://localhost:8080/index.html

点击connect 链接websocket端口

同时打开另外一个窗口，访问http://localhost:8080/index.html

在其中一个窗口输入文字

另一种方式(服务端广播式)

利用SimpMessagingTemplate 实现广播式推送

增加一个类

WebSocketController

package com.daijianwei.bootscoket.controller;

import com.daijianwei.bootscoket.bean.Greeting;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class WebSocketController {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @RequestMapping("/Welcome1")
    @ResponseBody
    public String say2() throws Exception {
        for (int i = 0; i < 10; i++) {
            Thread.sleep(1000);
            // 每次向/topic/greetings 发送消息
            simpMessagingTemplate.convertAndSend("/topic/greetings", new Greeting("daijianwei" + i));
            System.out.println("----------------------send" + i);
        }
        return "is ok";
    }

}
复制代码

同样在在浏览器的界面访问 http://localhost:8080/Welcome1

可以看到在两个界面的效果

参考文档

原spring boot ＋WebSocket 广播式（一） messaging-stomp-websocket SpringBoot中的WebSocket点对点发送消息

转载于:https://juejin.im/post/5b2b4bf9e51d4558c6520bdc

weixin_34198881
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 spring + websocket
一缕阳光
08-02 308
使用Spring + websocket 构建服务端客户端互动的web程序 这篇文章介绍构建一个从web端和服务器相互发送消息的hello world应用, wecoket是对TCP非常小、轻量级的封装层,目的是建立服务器端与客户端的全双工通讯模式。 构建的应用 服务器端接受从客户端发送来的name,然后把消息发送到客户端订阅的消息队列中。 环境 maven3.2+ Intellj idea...
WebSocket + Spring Boot使用
hOWtOdOthIs的博客
10-13 166
WebSocket + Spring Boot使用 websock简介 查看www.baidu.com 进入主题，使用websocket达到用户与用户之间通讯的目的 大概流程如下： 客户端1与服务器建立连接——>客户端1发送消息——>服务器接受消息——服务器转发消息给客户端2——>客户端2收到消息 代码1 import org.springframework.context.an...
Spring Boot 的websocket 配置
weixin_34320159的博客
04-17 118
为什么80%的码农都做不了架构师？>>> ...
Spring Boot--WebSocket
m0_37749778的博客
06-18 158
一、什么是WebSocketWebSocket为浏览器和服务器提供异步双工的功能，浏览器可以向服务器发送消息，服务器也可以向浏览器发送消息。
小菜鸟学习SPRING BOOT -- websocket配置
weixin_30885111的博客
05-26 104
　　菜鸟新来，大神勿喷，些许醍醐，感激涕零。因为 我总是装幽默，是因为我想让自己快乐。 　 websocket为浏览器为服务器提供了双工异步通信的功能，即浏览器可以向服务器发送消息，服务器也可以向浏览器发送消息。websocket需要浏览器的支持(ie10+、chrome 13+、firefox 6+)。 　　websocket是通过一个socket来实现双工异步通信功能，但是直接使用we...
Spring与WebSocket
奋斗、
04-20 1144
MAY 24, 2016 WebSocket介绍 在相当长的一段时间里面，我们为了web页面具有良好的交互及实时性，采用了Long Polling，Server Sent Events，Comet等技术，这些技术在特定场景下都能解决问题，但WebSocket的出现提供了一种新的可能性。WebSocket是HTML5定义的一种协议，这种协议可以实现client与server间全双
spring boot websocket 的使用
张小三的博客
07-18 2836
/如果spingboot配置文件中中配置了server.servlet.context-path，则格式为ws//ip接口启动的端口/server.servlet.context-path的名称/webSocketDemo。//连接到WebSocket的url地址。格式为ws//ip接口启动的端口/webSocketDemo。//连接发生错误的回调方法。//连接成功建立的回调方法。//ws连接断开的回调方法。//接收到消息的回调方法。//将消息显示在网页上。...
关于Spring Boot WebSocket整合以及nginx配置详解
08-29
在本文中，我们将深入探讨如何在Spring Boot应用中整合WebSocket，并了解如何进行相关的Nginx配置。WebSocket是一种在客户端和服务器之间建立长连接的协议，它允许双向通信，即服务器可以主动向客户端推送数据，而不...
[课堂课件讲解]Java微服务实践-Spring Boot WebSocket.pptx
08-27
【Java微服务实践-Spring Boot WebSocket】讲解 在现代互联网应用中，实时通信的需求日益增长，这催生了WebSocket协议的诞生。WebSocket协议是一种在客户端和服务器之间建立持久连接的协议，实现了全双工通信，使得...
详解spring boot Websocket使用笔记
08-31
【Spring Boot Websocket详解】 Spring Boot 是一个快速开发框架，它简化了创建独立的、生产级别的基于Spring的应用程序。在Spring Boot中集成WebSocket技术，可以实现实时双向通信，为实时推送消息提供便利。本文...
spring boot webSocket
07-12
本项目是关于如何在Spring Boot 2.0环境下集成WebSocket和STOMP（Simples Text Oriented Messaging Protocol）来实现广播通信和一对一通信的聊天功能。 首先，让我们深入理解WebSocket。WebSocket协议在HTML5中被...
spring-boot-websocket-client：通过JavaScript和Java客户端演示Spring Boot Websocket + Stomp服务
01-30
Spring Boot Websocket示例 在我们当前的项目中，我们想要添加一个使用websocket将消息推送到我们的移动应用程序的服务。 虽然上的文档在实现由简单Web应用程序非常出色，但是的与简短的入门指南并不十分吻合。 由于...
springboot系列之websocket
FOREVER_DO
07-29 480
springboot系列之websocket简介 简介
[WebSocket入门]搭建WebSocket多人在线聊天室笔记（SpringBoot+WebSocket）
weixin_47234994的博客
06-10 3348
前言 使用websocket创建多人在线聊天室，本文参考了老外的一篇文章：https://www.callicoder.com/spring-boot-websocket-chat-example/ 一、WebSocket是什么？ WebSocket是在单个TCP连接上进行全双工通信的协议，可以在服务器和客户端之间建立双向通信通道。 WebSocket 首先与服务器建立常规 HTTP 连接，然后通过发送Upgrade标头将其升级为双向 WebSocket 连接。 WebSocket使得客户端...
springboot 整合websoket
qq_43077857的博客
07-07 291
建一个springboot想demo 先看websocket配置类 WebSocketStompConfig package com.example.demo.config; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.soc
Spring Boot中使用WebSocket 【第一部分】
GeeLoong`s Blog
08-09 579
简介 所谓WebSocket， 类似于Socket，它的作用是可以让Web应用中的客户端和服务端建立全双工通信。在基于Spring的应用中使用WebSocket一般可以有以下三种方式： 使用Java提供的@ServerEndpoint注解实现 使用Spring提供的低层级WebSocket API实现 使用STOMP消息实现 下面，我将对这三种实现方式做一个简单介绍，此外有关WebSock...
Your browse does not support frame!
xiluoduyu
11-27 8978
问题描述：  http请求返回结果- Your browse does not support frame! 原因分析： User-Agent设置中Chrome版本太低 解决方法：        将Chrome版本改为最新- Chrome/39.0.2171.71
SpringBoot+WebSocket实现消息推送及简单的聊天功能
默存
10-18 870
一、WebSocket简介       WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。        WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持...
UDP协议
最新发布
hyldzbg的博客
09-04 853
把当前要计算校验和的数据，每个字节，都进行累加，把结果保存到这两个字节的变量(校验和)中，过程中溢出也没关系，如果中间某个数据，出现传输错误，第二次计算的校验和就会和第一次不同(CRC这个算法其实不是特别靠谱，比如如果前一个字节大小少1，后一个字节大小多1，那么最后得到的校验和任然相同，但是数据可能已经不同了)。描绘这个数据报的报文长度(包含报头)，这里的长度是指该报文有多少个字节，因为只有16位比特位的大小，因为数据传输可能会出错，所以需要一定的方法知道所传输的数据是否正确传输。
spring boot websocket
06-28
Spring Boot WebSocket是Spring Boot框架的一个模块，用于在Web应用程序中支持WebSocket协议。它提供了一组简单的配置和使用方式，使得开发人员可以轻松地在Web应用程序中使用WebSocket。可以通过Spring Boot的自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值