首页 > 解决方案 > 使用没有客户端代码 SockJS 的服务器端(Spring WebSocket)

问题描述

我正在使用 Spring Boot MVC 和安全性。现在我想使用 Spring WebSocket,例如,创建一个聊天。但是我可以将 JS 客户端代码写到服务器端吗?

当用户登录到他有JSESSION的站点时,当他单击连接按钮时,他调用STOMP的connect()方法进行订阅,STOMP使用服务器发出的JSESSION。我可以将此连接写入我的应用程序的服务器端吗?为什么在客户端再次使用重复连接?

我希望当用户发送一条消息时,服务器了解调用了什么 JS 方法并向订阅该主题的所有用户显示消息的容器(HTML)。

此外,当页面重新加载时,我windows.onload会再次创建连接。

我想将此代码用于服务器端 TT:

<script type="text/javascript">
      var stompClient = null;

      window.onload = function ( ) {
          connect();
      }

      function setConnected(connected) {
          document.getElementById('connect').disabled = connected;
          document.getElementById('disconnect').disabled = !connected;
          document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
          document.getElementById('response').innerHTML = '';
      }

      function connect() {
          const socket = new SockJS('/hello');
          stompClient = Stomp.over(socket);
          stompClient.connect({}, function(frame) {
              setConnected(true);
              console.log('Connected: ' + frame);

              stompClient.subscribe('/topic/greetings', function (outmessage) {
                  const content   =  JSON.parse(outmessage.body).messageEntity.content;
                  const time      =  JSON.parse(outmessage.body).messageEntity.date_create;
                  const date      =  JSON.parse(outmessage.body).messageEntity.date;
                  const user_name =  JSON.parse(outmessage.body).userEntity.user_name;
                  const user_avat =  JSON.parse(outmessage.body).userEntity.user_avatar;

                   showGreeting(content, user_name, time, date, user_avat);
              });
          });
      }

      function disconnect() {
          stompClient.disconnect();
          setConnected(false);
          console.log("Disconnected");
      }

      function sendMessage() {
          const message = document.getElementById('text').value;
          stompClient.send("/app/hello", {}, JSON.stringify({ 'text': message }));
      }

      function showGreeting (message, user_name, date_time, date, avatar) {

          const ul      =   document.getElementById('ul-message');
          const li      =   document.createElement('li');
          const p_mes   =   document.createElement('p');
          const p_user  =   document.createElement('p');
          const p_time  =   document.createElement('p');

            const div_container = document.createElement('div');
            const img_chat_ava  = document.createElement('img');
            const div_chat_name = document.createElement('div');
            const div_chat_mess = document.createElement('div');
            const div_chat_time = document.createElement('div');

            img_chat_ava.src    = avatar;

            div_container.classList.add("message-container");
            div_chat_mess.classList.add("message");
            div_chat_time.classList.add("message-time");
            div_chat_name.classList.add("chat-name");
            img_chat_ava.classList.add("avatar");

            li.appendChild(div_container);

            div_container.appendChild(img_chat_ava);
            div_container.appendChild(div_chat_name);
            div_container.appendChild(div_chat_mess);
            div_container.appendChild(div_chat_time);

                 p_mes.style.wordWrap = 'break-word';
                 p_mes.appendChild(document.createTextNode(message));
                 p_user.appendChild(document.createTextNode(user_name));
                 p_time.appendChild(document.createTextNode(date_time + " " + date));

            div_chat_mess.appendChild(p_mes);
            div_chat_name.appendChild(p_user);
            div_chat_time.appendChild(p_time);

            ul.appendChild(li);
      }

  </script>    

标签: javascriptjavaspring-securityspring-websocketstomp

解决方案


推荐阅读