测试websocket--个人

最新推荐文章于 2023-09-22 15:02:39 发布

B–rabbit

最新推荐文章于 2023-09-22 15:02:39 发布

阅读量648

点赞数

本文链接：https://blog.csdn.net/weixin_43871333/article/details/103703592

版权

pom文件

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.10.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-websocket</artifactId>
		</dependency>

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator</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>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

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

启动类

@SpringBootApplication
public class SpringBootWebsocketExampleApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringBootWebsocketExampleApplication.class, args);
	}
}

配置类


@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
//将"/websocket-example"注册为STOMP端点,客户端在订阅或发布消息到目的地路径前，要连接该端点
        stompEndpointRegistry.addEndpoint("/websocket-example")
//                .setHandshakeHandler(new MyHanlder())
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //客户端订阅消息的请求前缀，topic一般用于广播推送，topic用于点对点推送
        registry.enableSimpleBroker("/topic");
        //客户端发送消息的请求前缀
        registry.setApplicationDestinationPrefixes("/app");
        //服务端通知客户端的前缀，可以不设置，默认为user
        //registry.setUserDestinationPrefix("/user");
    }
}

模拟服务端的定时消息推送

@EnableScheduling
@Configuration
public class SchedulerConfig {

    @Autowired
    SimpMessagingTemplate template;

    @Scheduled(fixedDelay = 3000)
    public void sendAdhocMessages() {
        template.convertAndSend("/topic/user", new UserResponse("Fixed Delay Scheduler")); 
              template.convertAndSend("user/topic/msg",new UserResponse("欢迎光临！！"));
    }
}

控制层

@Controller
public class UserController {


    @MessageMapping("/user")
    @SendTo("/topic/user")
    public UserResponse getUser(User user) {

        return new UserResponse("Hi " + user.getName());
    }

//推给用户信息
    @MessageMapping("/toUser")
    @SendToUser("/topic/msg")
    public UserResponse getMsg(User user){
        UserResponse userResponse = new UserResponse("欢迎光临：" + user.getMsg());
        return userResponse;
    }
}

返回的消息

public class UserResponse {
    String content;

    public UserResponse() {
    }

    public String getContent() {
        return content;
    }

    public UserResponse(String content) {
        this.content = content;
    }
}

用户类

public class User {

    private String name;

    private String msg;

    public User() {
    }

    public User(String name) {
        this.name = name;
    }
    public User(String name,String msg){
        this.name=name;
        this.msg=msg;
    }

    public String getName() {
        return name;
    }



    public String getMsg() {
        return msg;
    }

}

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">1</button>

                <div class="form-group-sm">
                    <label for="msg">What is your msg?</label>
                    <input type="text" id="msg" class="form-control" placeholder="Your msg ...">
                </div>
                <button id="sendM" class="btn btn-default" type="submit">2</button>
            </form>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>StockInfo</th>
                </tr>
                </thead>
                <tbody id="userinfo"></tbody>
                <tr>
                    <th>Message</th>
                </tr>
                <tbody id="usermsg"></tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

app.js

var stompClient = null;

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

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

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

function sendName() {
    stompClient.send("/app/user", {}, JSON.stringify({'name': $("#name").val()}));
}
function sendMsg() {
    stompClient.send("/app/toUser",{},JSON.stringify({'msg':$("#msg").val()}));

}
function showMsg(mesagge) {
    $("#usermsg").append("<tr><td>"+mesagge+"</tr></td>");
}

function showGreeting(message) {
    $("#userinfo").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(); });
    $("#sendM").click(function () {sendMsg();});
});

application.yml

server.port=8091

app.js中是一些函数、逻辑
浏览器访问端口号:8091
进入index.html

B–rabbit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
测试websocket--个人

pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.10.RELEASE</version> <...
复制链接

扫一扫