JS websocket 连接ActiveMQ

最新推荐文章于 2024-08-16 22:38:12 发布
最新推荐文章于 2024-08-16 22:38:12 发布
阅读量6.8k 收藏 3
点赞数 4
分类专栏： ActiveMQ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/farmwang/article/details/78352032
版权 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chat Example Using STOMP Over WebSockets</title>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.responsive.css" rel="stylesheet">
    <style type="text/css">
      body { padding-top: 40px; }
    </style>
  </head>

  <body>
    
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">ActiveMQ STOMP WebSocket Chat Example</a>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span6">
          <div id="connect">
            <div class="page-header">
              <h2>Server Login</h2>
            </div>
            <form class="form-horizontal" id='connect_form'>
              <fieldset>
                <div class="control-group">
                  <label>WebSocket URL</label>
                  <div class="controls">
                    <input name=url id='connect_url' value='ws://localhost:61614' type="text">
                  </div>
                </div>
                <div class="control-group">
                  <label>User</label>
                  <div class="controls">
                    <input id='connect_login' placeholder="User Login" value="admin" type="text">
                  </div>
                </div>
                <div class="control-group">
                  <label>Password</label>
                  <div class="controls">
                    <input id='connect_passcode' placeholder="User Password" value="password" type="password">
                  </div>
                </div>
                <div class="control-group">
                  <label>Destination</label>
                  <div class="controls">
                    <input id='destination' placeholder="Destination" value="/topic/chat.general" type="text">
                  </div>
                </div>
                <div class="form-actions">
                  <button id='connect_submit' type="submit" class="btn btn-large btn-primary">Connect</button>
                </div>
              </fieldset>
            </form>
          </div>
          <div id="connected" style="display:none">
            <div class="page-header">
              <h2>Chat Room</h2>
            </div>
            <div id="messages">
            </div>
            <form class="well form-search" id='send_form'>
              <button class="btn" type="button" id='disconnect' style="float:right">Disconnect</button>
              <input class="input-medium" id='send_form_input' placeholder="Type your message here" class="span6"/>
              <button class="btn" type="submit">Send</button>
            </form>
          </div>
        </div>
        <div class="span4">
          <div class="page-header">
            <h2>Debug Log</h2>
          </div>
          <pre id="debug"></pre>
        </div>
      </div>
    </div>

    <!-- Scripts placed at the end of the document so the pages load faster -->
    <script src='js/jquery-1.7.2.min.js'></script>
    <script src="js/stomp.js"></script>
    <script>//<![CDATA[
    $(document).ready(function() {
      if(window.WebSocket) {
        var client, destination;
        $('#connect_form').submit(function() {
          var url = $("#connect_url").val();
          var login = $("#connect_login").val();
          var passcode = $("#connect_passcode").val();
          destination = $("#destination").val();

          client = Stomp.client(url);

          // this allows to display debug logs directly on the web page
          client.debug = function(str) {
            $("#debug").append(document.createTextNode(str + "\n"));
          };
          
          // the client is notified when it is connected to the server.
          client.connect(login, passcode, function(frame) {
            client.debug("connected to Stomp");
            $('#connect').fadeOut({ duration: 'fast' });
            $('#connected').fadeIn();
            client.subscribe(destination, function(message) {
              var p = document.createElement("p");
              p.appendChild(document.createTextNode(message.body));
              $("#messages").append(p);
            });
          });
          return false;
        });
  
        $('#disconnect').click(function() {
          client.disconnect(function() {
            $('#connected').fadeOut({ duration: 'fast' });
            $('#connect').fadeIn();
            $("#messages").html("")
          });
          return false;
        });
   
        $('#send_form').submit(function() {
          var text = $('#send_form_input').val();
          if (text) {
            client.send(destination, {}, text);
            $('#send_form_input').val("");
          }
          return false;
        });
      } else {
        $("#connect").html("\
            <h1>Get a new Web Browser!</h1>\
            <p>\
            Your browser does not support WebSockets. This example will not work properly.<br>\
            Please use a Web Browser with WebSockets support (WebKit or Google Chrome).\
            </p>\
        ");
      }
    });
    //]]></script>

  </body>
</html>







Farmwang
关注
专栏目录
Web端使用websocket连接ActiveMQ
彼岸花的博客
11-28 2321
需要导入：stop.js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ActiveMQ demo</title> <script type="text/javascript" src="https://cdn.bootcss.com/s...
web前端使用websocket获取ActiveMQ消息队列
赵佳佳的博客
02-24 2945
1.websocket 1、websocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 2、websocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 3、websocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 2.activeMQ 1、MQ:Message Queue 消息队列，就是用来在系统之间进行消息传递的。 2、MQ俗称消息队列,也称为消息中间件,是一种在分布式系统中应用程序借以
activemq推数据给前端的方式
刘皇叔说Java的博客
07-03 1228
前端可以使用 MQTT.js 库，通过 WebSocket 连接到 ActiveMQ 服务器并接收消息。生产者将消息发布到 MQTT 主题，前端通过 MQTT over WebSocket 连接到 ActiveMQ 并订阅相应的主题，以接收并显示消息。生产者将消息发送到 ActiveMQ 队列，消费者从队列中接收消息并通过 WebSocket 将消息传递给前端，前端通过 WebSocket 接收并显示消息。ActiveMQ 也支持 MQTT 协议，可以使用 MQTT 协议将数据推送到前端。
使用WebSocket协议接收ActiveMQ消息
11-20
ActiveMQ允许客户端使用多种协议接收消息，其中WebSocket协议的URL使用ws://开头，默认端口号是61614
聊聊JS中的WebSocket
最新发布
沐爸的博客
08-16 1347
WebSocket是什么？有什么特点？怎么使用呢？有什么优缺点和使用场景？和HTTP有什么区别？
websocket连接activemq指定连接名
m0_49230763的博客
11-23 565
websocket连接activemq指定连接名 如果使用浏览器连接activemq，那么大家会用到websocket技术以及stomp协议，具体的连接操作以及各种详细解释，在下面的网站中，是stomp协议的官方介绍。 链接：github上的官方文档 链接：websocket-stomp的使用 大家都是知道，stomp协议就是对websocket的封装使用。 使用stomp时，使用client.connect（）方法连接到activemq，但是该方法并不能指定连接名或者其他参数，它没有重载方法，他的第一个参
javascript 中使用 ActiveMQ
ice_bear221的博客
04-13 1074
javascript 中使用 ActiveMQ
Activemq的连接方式
weixin_33881050的博客
01-06 218
http://blog.csdn.net/liangguo03/article/details/7011227 http://blog.csdn.net/johnnie_deng/article/details/17112343
WebSocket协议接收ActiveMQ
01-15
文件"activemq_ws_消息接收"可能包含了如何配置WebSocket连接，以及如何在ActiveMQ中接收WebSocket消息的具体示例代码或者配置文件。具体实现可能涉及Java的WebSocket API，如JSR 356，或者JavaScript的WebSocket...
Activemq-MQTT-Websocket库Js文件mqttws31.js
07-21
`mqttws31.js` 是一个JavaScript库，专门用于前端与使用Websocket连接的ActiveMQ中间件进行交互。这个库实现了MQTT协议在Websocket层面上的封装，允许JavaScript应用通过Websocket协议与ActiveMQ进行通信。它使得...
SpringBoot整合ActiveMQ+websocket
坚守己心的博客
08-05 1586
目录 Queue Pom application.yml 队列生成者 Config 队列生成者代码 队列消费者 队列消费者代码 Topic Pom application.yml 主题生产者 Config 主题生产者代码 主题消费者 主题消费者代码 Websocket H5配置方式 Config h5WebSocket代码 Controller中结合MQ调...
mqttjs(activemq测试工具)
03-15
activemq消息测试工具
webchat聊天室(websocket+activemq编写)
07-07
webchat聊天室(websocket+activemq编写),适合新手学习，想学习websocket或者activemq的同学可以下载看看，质量保证~
jms的js源码(activemq)
09-10
jms在js中的实现，是activemq实现的jms
activemq+js
03-16
NULL 博文链接：https://andilyliao.iteye.com/blog/436541
ActiveMQ支持安全websocket连接
zxygww的专栏
06-29 5878
注意：在ActiveMQ5.11.1+jdk1.7环境中验证通过。 步骤： 1、使用JDK自带的证书生成工具，生成证书； keytool -genkeypair -alias "active" -keyalg "RSA" -keystore "d:\activemq.keystore" 记住生成证书过程中设置的password。 2、将activemq.keystore文件拷贝到Acti
js调用activeMQ
dengjuekai7173的博客
08-17 399
1:引入脚本的顺序. 2:兼容tomcat7+ <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>org.apache.activemq.web.AjaxServlet</servlet-class> &lt...
使用websocket连接Activemq，让前端接收MQTT消息
安心写bug的博客
04-25 7352
使用websocket连接Activemq，让前端接收MQTT消息Activemq简介准备工作简单示例 Activemq简介 Apache ActiveMQ™ is the most popular open source, multi-protocol, Java-based messaging server. It supports industry standard protocols so...
ActiveMQ使用(三):在JavaScript中使用mqttws31.js
ice_bear221的博客
04-13 841
ActiveMQ使用(三):在JavaScript中使用mqttws31.js
springboot websocket activemq
09-23
### 回答1： Spring Boot是一个非常流行的Java框架，可以轻松地创建Web应用程序。如果你想要使用WebSocket和ActiveMQ来实现实时通信，可以按照以下步骤： 1. 添加Maven依赖：在你的pom.xml文件中添加以下依赖 ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-activemq</artifactId> </dependency> ``` 2. 配置WebSocket：创建一个WebSocketConfigurer类，配置WebSocket的消息处理程序和地址。例如： ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myHandler(), "/my-handler").setAllowedOrigins("*"); } @Bean public WebSocketHandler myHandler() { return new MyHandler(); } } ``` 3. 创建一个WebSocket处理程序：创建一个类来处理WebSocket消息。例如： ```java public class MyHandler extends TextWebSocketHandler { @Override public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // 处理文本消息 } } ``` 4. 配置ActiveMQ：在application.properties或application.yml文件中添加以下配置，指定ActiveMQ的地址和队列名称。 ```yaml spring.activemq.broker-url=tcp://localhost:61616 spring.activemq.user=admin spring.activemq.password=admin spring.jms.pub-sub-domain=false spring.jms.template.default-destination=my-queue ``` 5. 发送和接收消息：在你的控制器中使用JmsTemplate来发送和接收消息。例如： ```java @RestController public class MyController { @Autowired private JmsTemplate jmsTemplate; @PostMapping("/send-message") public void sendMessage(@RequestBody String message) { jmsTemplate.convertAndSend(message); } @JmsListener(destination = "my-queue") public void receiveMessage(String message) { // 处理消息 } } ``` 这就是使用Spring Boot、WebSocket和ActiveMQ实现实时通信的基本步骤。当然，具体实现还取决于你的需求和业务逻辑。 ### 回答2： Spring Boot是一个用于构建Java应用程序的开发框架，它简化了Java开发的繁琐和复杂性。WebSocket是一种通信协议，可以在客户端和服务器之间建立双向的实时通信。而ActiveMQ是一个流行的开源消息队列中间件，用于在分布式系统中传递消息。 Spring Boot可以很方便地集成WebSocket和ActiveMQ，实现实时的消息传递。首先，我们需要添加相应的依赖包到项目的配置文件中，然后编写WebSocket的配置类和ActiveMQ的配置类。 在WebSocket的配置类中，我们需要定义一个WebSocket处理器，用于处理客户端和服务端的通信。同时，我们还需要定义一个服务器端点，用于客户端连接WebSocket。 在ActiveMQ的配置类中，我们需要定义一个连接工厂，用于创建和管理与ActiveMQ的连接。同时，我们还需要定义一个消息队列，用于存储和分发消息。 然后，我们可以在Spring Boot的控制器中利用WebSocket和ActiveMQ来实现实时通信。我们可以将客户端的消息发送到消息队列中，然后订阅消息队列的监听器会即时地接收到消息。同时，我们还可以将服务器端的消息通过WebSocket发送给客户端，实现双向的实时通信。 总的来说，Spring Boot可以方便地集成WebSocket和ActiveMQ，实现实时的消息传递。通过这种方式，我们可以构建一些实时性要求较高的应用程序，如在线聊天、实时数据展示等。 ### 回答3： Spring Boot是一个用于构建Java应用程序的开发框架，WebSocket是一种通信协议，ActiveMQ是一个开源消息中间件。结合这三者可以实现在Spring Boot应用中使用WebSocket与ActiveMQ进行通信。 在Spring Boot中集成WebSocket和ActiveMQ的步骤如下： 1. 首先，在pom.xml文件中添加WebSocket和ActiveMQ的依赖。 2. 创建一个WebSocket配置类，用于配置WebSocket的相关信息，包括注册WebSocket处理器和握手拦截器等。 3. 创建一个WebSocket处理器类，用于处理WebSocket请求并与ActiveMQ进行通信。 4. 创建一个ActiveMQ配置类，配置ActiveMQ的连接信息。 5. 在需要使用WebSocket的地方，注入WebSocket处理器，并使用WebSocket发送消息。 通过这样的配置和代码编写，就可以实现使用Spring Boot、WebSocket和ActiveMQ进行通信的功能。当客户端发送消息到WebSocket时，WebSocket处理器会将消息发送到ActiveMQ，接着ActiveMQ将消息发送给订阅了该消息的其他客户端。 使用Spring Boot、WebSocket和ActiveMQ的好处是可以实现实时的双向通信，并能够将消息发送给多个订阅者。这对于实时聊天应用、实时数据推送等场景非常有用。 总之，结合Spring Boot、WebSocket和ActiveMQ可以实现一个强大的实时通信功能。通过合理的配置和编写相应的代码，可以轻松地实现这一功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Farmwang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值