一、Websocket入门案例

服务端代码：

<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.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.1.3.RELEASEversion>
        <relativePath/> 
    parent>

    <groupId>com.liaoxianggroupId>
    <artifactId>websocket_demoartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <name>websocket_demoname>
    <description>Demo project for Spring Bootdescription>

    <properties>
        <java.version>1.8java.version>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-websocketartifactId>
        dependency>

        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>

        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
        dependency>
    dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
            plugin>
        plugins>
    build>

project>

@Data
@ToString
@NoArgsConstructor
public class InMessage {
	private String from;
	private String to;
	private String content;
	private Date time = new Date();
	public InMessage(String content) {
		this.content = content;
	}
}
@Data
@ToString
@NoArgsConstructor
public class OutMessage {
	private String from;
	private String content;
	private Date time = new Date();

	public OutMessage(String content){
		this.content = content;
	}
}
@Data
@ToString
@NoArgsConstructor
public class User {
    private String username;
    private String pwd;

    public User(String username, String pwd) {
        this.username = username;
        this.pwd = pwd;
    }
}

@Controller
public class GameInfoController {
    @MessageMapping("/send_announcement")
    @SendTo("/game/announcement")
    public OutMessage gameInfo1(InMessage message){
        System.out.println("收到的消息："+message.toString());
        return new OutMessage(message.getContent());
    }
}

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /**
     * 注册端点，发送或者订阅消息前，需要连接此端点
     * @param registry
     */
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/endpoint-websocket") //端点名称
                .setAllowedOrigins("*") // 跨域访问
                .withSockJS(); // 使用sockJS协议
    }
    /**
     * 配置消息代理
     * enableSimpleBroker: 服务端推送消息给客户端的一个前缀
     * setApplicationDestinationPrefixes: 客户端发送消息给服务端的前缀
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/game");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

前端部分代码

//app.js
var stompClient = null;

/**
 * 设置按钮的可用
 * @param connected
 */
function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#notice").html("");
}

/**
 * 连接服务器
 */
function connect() {
    var socket = new SockJS('localhost:8099/endpoint-websocket'); //连接上端点(基站)
    stompClient = Stomp.over(socket);//用stom进行包装，规范协议
	// 第一个参数为头信息
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/game/announcement', function (result) {
        	console.info(result);
        	console.log('收到的消息'+result);
        	showContent(JSON.parse(result.body));
        });
    });
}

/**
 * 断开连接
 */
function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

/**
 * 获取输入框内容转化为JSON格式向服务器发送的消息
 */
function sendContent() {
    stompClient.send("/app/send_announcement", {}, JSON.stringify({'content': $("#content").val()}));
}

/**
 * 展示服务器返回的消息
 * @param body
 */
function showContent(body) {
    $("#notice").append("" + body.content + " "+new Date(body.time).toLocaleString()+"");
}

/**
 * 入口函数
 */
$(function () {
	//阻止表单的默认事件
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendContent(); });
});

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>管理员title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery.min.js">script>
    <script src="js/sockjs.min.js">script>
    <script src="js/stomp.min.js">script>
    <script src="js/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">建立连接通道:label>
                    <button id="connect" class="btn btn-default" type="submit">Connectbutton>
                    <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">发布新公告label>
                    <input type="text" id="content" class="form-control" placeholder="请输入...">
                div>
                <button id="send" class="btn btn-default" type="submit">发布button>
            form>
        div>
    div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>游戏公告内容th>
                tr>
                thead>
                <tbody id="notice">
                tbody>
            table>
        div>
    div>
div>
body>
html>


<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>用户端title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery.min.js">script>
    <script src="js/sockjs.min.js">script>
    <script src="js/stomp.min.js">script>
    <script src="js/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">建立连接通道:label>
                    <button id="connect" class="btn btn-default" type="submit">Connectbutton>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    button>
                div>
            form>
        div>
    div>
    
	<div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>游戏公告内容th>
                tr>
                thead>
                <tbody id="notice">
                tbody>
            table>
        div>
    div>
div>
body>
html>