websocket案例 -- 简单游戏公告系统

webjars使用介绍

1、方便统一管理

2、主要解决前端框架版本不一致，文件混乱等问题

3、把前端资源，打包成jar包，借助maven工具进行管理

网上解释

将JavaScript，Css等打成jar包文件，以对资源进行统一依赖管理

针对前后端未分离的情况

xdclass_websocket/

src/main/java/xdclass_websocket/model

InMessage.java
package xdclass_websocket.model;
​
import java.util.Date;
​
public class InMessage {
    private String from;
    private String to;
    private String content;
    private Date time;
}
OutMessage.java
package xdclass_websocket.model;
​
import java.util.Date;
​
public class OutMessage {
    private String from;
    private String content;
    private Date time = new Date();
    public OutMessage(){}
}

 

src/main/java/xdclass_websocket/controller.v1

GameInfoController.java
package xdclass_websocket.controller.v1;
​
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import xdclass_websocket.model.InMessage;
import xdclass_websocket.model.OutMessage;
​
@Controller
public class GameInfoController {
    @MessageMapping("/v1/chat")     // 相当于@RequestMapping()，但@MessageMapping()针对WebSocket使用
    @SendTo("/topic/game_chat")     // 消息转发的路径
    public OutMessage gameInfo(InMessage message){
        return new OutMessage(message.getContent());
    }
}

 

src/main/java/xdclass_websocket/config

WebSocketConfig.java
package xdclass_websocket.config;
​
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
​
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{
    /**
     * 注册端点，发布或者订阅消息的时候需要连接此端点
     * setAllowedOrigins 非必须，*表示允许其他域进行连接
     * withSockJS  表示开始sockejs支持
     */
    public void registerStompEndpoints(StompEndpointRegistry registry) {
​
        registry.addEndpoint("/endpoint-websocket").setAllowedOrigins("*").withSockJS();
    }
    /**
     * 配置消息代理(中介)
     * enableSimpleBroker 服务端推送给客户端的路径前缀
     * setApplicationDestinationPrefixes  客户端发送数据给服务器端的一个前缀
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic", "/chat");
        registry.setApplicationDestinationPrefixes("/app"); 
    }   
}

 

src/main/resourses/static.v1/

index.html
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/v1/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="/v1/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">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">发布新公告</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>
admin.html
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/v1/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="/v1/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">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">发布新公告</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>
​
app.js
var stompClient = null;
​
//建立连接
function setConnected(connected) {
    // 为connect添加属性
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#notice").html("");
}
​
// 连接
function connect() {
    var socket = new SockJS('/endpoint-websocket'); // 连接上端点(基站)
    
    stompClient = Stomp.over(socket);           // 用stom进行包装，规范协议
    stompClient.connect({}, function (frame) {  // {}为head部分
        // 连接建立、断开，显示/隐藏公告内容
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/game_chat', function (result) {
            console.info(result)
            showContent(JSON.parse(result.body));
        });
    });
}
​
// 断开连接
function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}
​
// 发送消息
function sendName() {
    stompClient.send("/app/v1/chat", {}, JSON.stringify({'content': $("#content").val()}));
}
​
// 展示消息
function showContent(body) {
    $("#notice").append("<tr><td>" + body.content + "</td> <td>"+new Date(body.time).toLocaleString()+"</td></tr>");
}
​
// 入口
$(function () {
    $("form").on('submit', function (e) {
        // 阻止默认事件发生
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});

 

运行流程(自己理解的)

1.连接基站

后端设置基站名称，前端创建SockJS (new SockJS('基站名称'))时连接

2.客户端发送消息

发送消息的路径为：config文件中配置的前缀+@MessageMapping()中的路径

案例:

config前缀：

registry.setApplicationDestinationPrefixes("/app");

MessageMapping路径

@MessageMapping("/v1/chat")

前端发送消息的连接路径

stompClient.send("/app/v1/chat", {}, JSON.stringify({'content': $("#content").val()}));

3.服务端转发消息

@SendTo("/topic/game_chat") // 消息转发的路径

posted @ 2020-08-20 16:38  minnersun  阅读(533)  评论(0)  编辑  收藏  举报