Springboot 快速搭建websocket聊天室

開發(fā)環(huán)境

第一步:搭建springboot項目

  • 使用 IDEA济蝉,file-->new Object


    image.png

    按找如上步驟然后一直next瓷患,然后finish朴下,springboot項目已經(jīng)建立完成建瘫,是不是很快很簡單榕栏。

    目錄結(jié)構(gòu)如下:
    image.png

第二步:配置websocket

  • 添加依賴

<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>
```

  • 建立如下目錄結(jié)構(gòu)


    image.png
    • domain 消息返送和接受的實體類
/**
* 發(fā)生消息實體
*/
public class Sendmessage {

   private String name ;

   public String getName() {
       return name;
   }

   public void setName(String name) {
       this.name = name;
   }
}
/**
 *  響應(yīng)消息實體
 */
public class Receivemessage {

    private String content;

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Receivemessage(String content) {
        this.content = content;
    }
}
  • WebSocketConfig.java 配置websocket
/**
 * WebSocket 配置
 */
@Configuration
//注解開啟使用STOMP協(xié)議來傳輸基于代理(message broker)的消息,這時控制器支持使用@MessageMapping,就像使用@RequestMapping一樣
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//注冊STOMP協(xié)議的節(jié)點(endpoint),并映射指定的url
        //注冊一個STOMP的endpoint,并指定使用SockJS協(xié)議
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic"); //廣播式應(yīng)配置一個/topic消息代理
        registry.setApplicationDestinationPrefixes("/app"); //客戶端訪問前綴
    }
}
  • 控制層代碼

@Controller
public class WebSocketController {

    @MessageMapping("/hello") // 相當(dāng)springMVC 中的RequestMapping
    @SendTo("/topic/greetings")
    public Receivemessage greeting(Sendmessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Receivemessage("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }

}

前端JS和Html

  • 在resources目錄下新建static目錄渴频,spring boot 靜態(tài)文件默認是放在這個目錄下,如果不理解請移步springboot入門竭恬。在static目錄下新建index.html ,app.js ,main.css 三個文件。

image.png

index.html 內(nèi)容


<!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>

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("/app/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;
}

到這項目就完成了熬的,我們運行DemoApplication 來看我們的項目


image.png

沒問題已經(jīng)可以發(fā)送消息了痊硕,趕緊去試一試吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末押框,一起剝皮案震驚了整個濱河市岔绸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌橡伞,老刑警劉巖盒揉,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異兑徘,居然都是意外死亡刚盈,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門挂脑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來藕漱,“玉大人,你說我怎么就攤上這事崭闲±吡” “怎么了?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵镀脂,是天一觀的道長牺蹄。 經(jīng)常有香客問我,道長薄翅,這世上最難降的妖魔是什么沙兰? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮翘魄,結(jié)果婚禮上鼎天,老公的妹妹穿的比我還像新娘。我一直安慰自己暑竟,他們只是感情好斋射,可當(dāng)我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布育勺。 她就那樣靜靜地躺著,像睡著了一般罗岖。 火紅的嫁衣襯著肌膚如雪涧至。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天桑包,我揣著相機與錄音南蓬,去河邊找鬼。 笑死哑了,一個胖子當(dāng)著我的面吹牛赘方,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播弱左,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼窄陡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拆火?” 一聲冷哼從身側(cè)響起跳夭,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎榜掌,沒想到半個月后优妙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡憎账,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年套硼,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胞皱。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡邪意,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出反砌,到底是詐尸還是另有隱情雾鬼,我是刑警寧澤,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布宴树,位于F島的核電站策菜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏酒贬。R本人自食惡果不足惜又憨,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锭吨。 院中可真熱鬧蠢莺,春花似錦、人聲如沸零如。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至祸憋,卻和暖如春会宪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蚯窥。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工狈谊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沟沙。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像壁榕,于是被迫代替她去往敵國和親矛紫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容