SpringBoot WebSocket实现 web页面聊天

最新推荐文章于 2024-05-11 14:06:17 发布

Dalon_G

最新推荐文章于 2024-05-11 14:06:17 发布

阅读量633

点赞数

分类专栏：后台工具类文章标签： WebSocket发送消息

本文链接：https://blog.csdn.net/Dalon_G/article/details/80392482

版权

后台同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

工具类

15 篇文章 0 订阅

订阅专栏

1.导入websock所需要的pom文件

   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
      <version>1.3.5.RELEASE</version>
   </dependency>

2.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 {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/endpointChat").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/queue");
    }
}

3.创建socket需要工具类


import com.seage.commons.utils.SeageUtils;
import com.seage.tjsafety.common.entity.data.DataOperationLog;
import com.seage.tjsafety.dao.DataDao;
import com.seage.tjsafety.service.project.service.DataService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

import java.util.ArrayList;
import java.util.List;

@Controller
public class SocketUtil {
    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;
    @Autowired
    private DataService dataService;

    /**              。。。。。。。。。。。。。。①
     * 发送需要调用方法
     * @param msg 发送消息
     */
    @MessageMapping("/chat")
    public void handleChat(String msg){
        System.out.println("执行发送方法，接收人  admin  接收信息"+msg);
        String uname="admin";
        rebackRunDataMess(msg,uname);
    }


    /**              。。。。。。。。。。。。。②
     * 修改信息后返回给其他用户有关修改信息
     * @param dataOperationLog 操作Logger对象信息
     */
    public void revertOpinionMess(DataOperationLog dataOperationLog,String acceptName,String userName) throws Exception{
        //所有用户发送消息
        if(!isEmpty(acceptName)){
            simpMessagingTemplate.convertAndSendToUser(acceptName,"/queue/notifications",
                userName+dataOperationLog.getDetail());
        }else {
            throw new Exception("接收更改消息的姓名不能为空");
        }
    }
}

注释：

1.方法一直接引入config文件后，调用改方法就可以直接执行，可以用来开发简单的，内容用户接受比较唯一的

2.方法二是我需要给多个用户使用socket发送消息，所以这里直接就是一个类似于工具类，每一个用户发送信息要多次调用改方法

4.创建jsp页面

<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>聊天室</title>
        <script src="${path}/static/js/common/jquery-1.11.1.min.js"></script>
        <script src="${path}/static/js/common/stomp.js"></script>
        <script src="${path}/static/js/login/particles.js"></script>
        <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
        <%--<script type="text/javascript" src="${path}/static/js/common/socketCommon.js"></script>--%>
    </head>
    <script>
        var path = '${path}';
    </script>
    <p>聊天室</p>
    <form id="sangForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit" value="发送"/>
    </form>
    <button id="stop">断开</button>
    <script th:inline="javascript">
        $("#sangForm").submit(function (e) {
            e.preventDefault();
            var textArea = $("#sangForm").find('textarea[name="text"]');
            var text = textArea.val();
            sendSpittle(text);
            textArea.val('');
        });
        //创建socket链接
        var sock = new SockJS("/endpointChat");
        var stomp = Stomp.over(sock);
        stomp.connect('guest','guest',function (frame) {
            stomp.subscribe("/user/queue/notifications", handleNotification);
        });
        //接受返回信息需要调用的方法
        function handleNotification(message) {
            $("#output").append("<b>后台返回的消息： "+message.body+"</b><br/>")
        }
        //发送信息  对应SocketUtil的方法
        function sendSpittle(text) {
            stomp.send("/chat", {}, text);
        }
        $("#stop").click(function () {
            sock.close();
        });

    </script>
    <div id="output" >发送消息内容为：<br><br></div>

    </body>
    </html>

注：

1.这个jsp页面实现了该用户发送消息，点击发送后消息返回

测试结果：

我调用的是SocketUtil.chat方法，登录的就直接是admin用户，发送消息返回给自己，实现简单的通讯