DaiXT:springboot+thymeleaf+ActiveMQ+Ajax异步请求实现聊天室功能

最新推荐文章于 2022-07-08 14:42:01 发布

与子何如

最新推荐文章于 2022-07-08 14:42:01 发布

阅读量378

点赞数 1

分类专栏： Spring 文章标签： ajax java spring boot

本文链接：https://blog.csdn.net/Dai_XT/article/details/120189930

版权

Spring 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述

步骤如下：
一、
先开启ActivityMQ服务

在这个页面点击

登录用户名和密码均为admin

项目搭建完成后在此页面可以看到消息的交互信息
二、
在idea中建项目

选择如下三种技术

建两个项目：
项目结构视图如下
在这里插入图片描述
ChatA后端代码：

public class MyMessage {
    private String name;
    private String mess;

    public MyMessage(String name, String mess) {
        this.name = name;
        this.mess = mess;
    }

    public MyMessage() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMess() {
        return mess;
    }

    public void setMess(String mess) {
        this.mess = mess;
    }
}


import org.springframework.jms.annotation.JmsListener;
import org.springframework.stereotype.Component;

import javax.jms.JMSException;
import javax.jms.MapMessage;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@Component
public class receiveMessage {
    //用于存储单条消息
    String one_Message;
    //用于存储通信的全部消息
    List<String> list = new ArrayList<>();
    //设置日期的格式
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("YYYY/MM/dd,hh:mm:ss");

    public void  addMessage(String newMessage){
        list.add(simpleDateFormat.format(new Date())+"\n"+"\n"+newMessage+"\n"+"\n");
    }

    @JmsListener(destination = "des_B")
    public void toFind(MapMessage map)throws JMSException {
        //接收每一条消息
        one_Message = simpleDateFormat.format(new Date())+"\n"+"\n"+ map.getString("chat_B")+"\n"+"\n";
        list.add(one_Message);
    }

}

import org.springframework.context.annotation.Configuration;
import org.springframework.jms.core.MessageCreator;
import org.springframework.stereotype.Component;

import javax.jms.JMSException;
import javax.jms.MapMessage;
import javax.jms.Message;
import javax.jms.Session;
@Component
public class sendMessage implements MessageCreator {
    String one_Message;
    sendMessage (MyMessage myMessage){
        one_Message = myMessage.getName()+":"+myMessage.getMess();
    }
    sendMessage (){

    }

    @Override
    public Message createMessage(Session session) throws JMSException {
        MapMessage mess = session.createMapMessage();
        mess.setString("chat_A",one_Message);
        return mess;
    }
}

@Component
public class sendRunner {
    sendRunner(JmsTemplate jms,sendMessage message){
        jms.send("des_A",message);
    }
}

@Controller
public class TestController {

    //发送给Chat_B
    @Autowired
    private JmsTemplate jms;
    @Autowired
    receiveMessage receiveMessage;

    @RequestMapping("/chatA_index")
    public String  index(String chatA_mess){
        System.out.println("从前台接收的数据为"+chatA_mess);
        receiveMessage.addMessage("ChatA_小红说:"+chatA_mess);
        if (chatA_mess!=null){
            new sendRunner(jms,new sendMessage(new MyMessage("ChatA_小红说",chatA_mess)));
        }
        return "hello";
    }

    //接收Chat_B
    @RequestMapping("/chatA_hello")
    @ResponseBody
    public List<String> hello(){
        return receiveMessage.list;
    }
}

引入jquery的包
在这里插入图片描述
前端页面：

<!DOCTYPE html>
<html lang="en">
	<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>

		<script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
		<!--<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
		<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>-->
	</head>

	<body>

		<div style="width:70%; height: 50px;margin:auto;margin-top: 5mm;">

		</div>

		<div id="main" style="width:100%; height: 500px;margin:auto;margin-top: 5mm;">
			<div style="width:70%; height: 350px;margin:auto;margin-top: 5mm;">
				<textarea id="ulul" style="height: 350px;width: 100%;resize: none;" readonly></textarea>
			</div>

			<div style="width:71%; height: 50px;margin:auto;margin-top: 5mm;">
				<input id="send_input" style="float: left;width:85%; height: 45px;" type="text" placeholder="请输入内容" />
				<button style="float: right;width: 14%;height: 50px;" type="submit" onclick="sendMessage();">发送</button>
			</div>

		</div>
		<script th:inline="javascript">
			//接收信息
			$(function upmessage() {
				$.ajax({
					url: '/chatA_hello',
					type: 'get',
					dateType: 'json',
					async: true, //是否异步请求
					success: function(res) {
						var html = res;
						console.log(res);
						$("#ulul").html(html);
					}
				});
				setTimeout(upmessage, 1000 * 1);
			});
			//发送信息
			function sendMessage() {
				$.ajax({
					url: '/chatA_index',
					type: 'post',
					data: {
						"chatA_mess": $("#send_input").val()
					},
					dateType: 'json',
					async: true, //是否异步请求
					success: function(res) {
						console.log(res);
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.log(res);
					},
				});
				$('div input').val(''); //清空输入框
			}
		</script>
	</body>

	</html>

ChatB的前后端代码和ChatA的大致相同
只需要改如下
在这里插入图片描述

最后配置两个项目的
在如上文件中配置如下代码段，第二个项目要改端口号

spring.activemq.broker-url=tcp://localhost:61616
server.port=8081

与子何如

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录