SpringBoot中WebSocket的应用：聊天室

来源：互联网发布：java短信发送验证编辑：程序博客网时间：2024/06/05 20:58

springboot中使用的websocket的子协议STOMP。STOMP协议是一个更高级别的协议，使用一个基于帧结构的格式来定义消，与HTTP的request和response类似。

1.新建一个springboot工程，添加websocket和Thymleaf依赖

thymeleaf相关的知识参考我的另一篇博文：http://blog.csdn.net/JHYPXS/article/details/78080231

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

2.添加websocket配置

package com.cvsea.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@EnableWebSocketMessageBrokerpublic class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{    @Override    public void registerStompEndpoints(StompEndpointRegistry P_Registry) {        P_Registry.addEndpoint("endpointCvsea").withSockJS();    }    @Override    public void configureMessageBroker(MessageBrokerRegistry P_Registry) {        P_Registry.enableSimpleBroker("/topic");    }}

3.接受到的消息Entity

package com.cvsea.websocket.model;public class CvseaMessage {    private String content;    public String getContent() {        return this.content;    }}

4.发送到客户端的消息Entity

package com.cvsea.websocket.model;public class CvseaResponeMessage {    private String content;    public CvseaResponeMessage(String P_Message)    {        this.content=P_Message;    }    public String getContent() {        return this.content;    }}

5.前端控制器

package com.cvsea.websocket.controller;import org.springframework.messaging.handler.annotation.MessageMapping;import org.springframework.messaging.handler.annotation.SendTo;import org.springframework.stereotype.Controller;import com.cvsea.websocket.model.CvseaMessage;import com.cvsea.websocket.model.CvseaResponeMessage;@Controllerpublic class WebSocketController {    @MessageMapping("/welcome")    @SendTo("/topic/getResponse")    public CvseaResponeMessage response(CvseaMessage P_Message)    {        return new CvseaResponeMessage(P_Message.getContent());    }}

6.添加js脚本到/src/main/resources/static/

js下载地址：

#stomp.min.js存放在/websocket/js/http://www.bootcdn.cn/stomp.js/#sockjs.min.js存放在/websocket/js/http://www.bootcdn.cn/sockjs-client/#jquery.min.js存放在/common/js/http://www.bootcdn.cn/jquery/

7.前端thymeleaf模板页面/src/main/resources/templates/websocket/ws.html

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8" /><title>websocket</title></head><body onload="disconnect()">    <noscript>        <h2 style="color: #ff0000">您的浏览器不支持websocket，请升级</h2>    </noscript>    <div>        <div>            <button id="connect" onclick="connect();">连接</button>            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>        </div>        <div id="conversation" style="visibility: hidden">            <label>请输入聊天内容：</label><input type="text" id="message" />            <button id="sendmessage" onclick="sendMessage();">发送</button>            <ul id="response">            </ul>        </div>    </div>    <script th:src="@{/websocket/js/sockjs.min.js}"></script>    <script th:src="@{/websocket/js/stomp.min.js}"></script>    <script th:src="@{/common/js/jquery.min.js}"></script>    <script type="text/javascript">        var stompClient = null;        function setConnected(connected) {            document.getElementById("connect").disabled = connected;            document.getElementById("disconnect").disabled = !connected;            document.getElementById("conversation").style.visibility = connected ? "visible"                    : "hidden";            $("#response").html();        }        function connect() {            var socket = new SockJS("/endpointCvsea");            stompClient = Stomp.over(socket);            stompClient.connect({}, function(frame) {                setConnected(true);                console.log("Connected:" + frame);                stompClient.subscribe("/topic/getResponse", function(response) {                    showResponse(JSON.parse(response.body).content);                });            });        }        function disconnect() {            if (stompClient != null) {                stompClient.disconnect();            }            setConnected(false);            console.log("disconnnected");        }        function sendMessage() {            var message = $("#message").val();            stompClient.send("/welcome", {}, JSON.stringify({                "content" : message            }));        }        function showResponse(message) {            var response = $("#response");            response.append("<li>" + message + "</li>");        }    </script></body></html>

8.程序入口

package com.cvsea;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;@Controller@SpringBootApplicationpublic class Learning1Application {    @RequestMapping("/websocket")    public String ws(Model model)    {        return "websocket/ws";     }    public static void main(String[] args) {        SpringApplication.run(Learning1Application.class, args);    }}

9.运行测试，可以使用不同的浏览器打开这个页面，查看效果

这里写图片描述

阅读全文

0 0