title: STOMP Protocol with SockJS Middleware Example for Redux + React Native
body: <h1>Context</h1>
  <p>I am currently building a React Native app that uses web sockets to provide some real-time functionality. I have redux implemented and working and I am now trying to create the middleware that will maintain the web socket connection. While I am familiar with React Native and Redux, Socket connections are new to me.
  The Server to which the app is connecting to is built with Spring - It makes use of SockJS and uses the STOMP protocol.</p>
  <h1>Problem</h1>
  <p>I am unsure of the correct way to implement the middleware with STOMP. While I have come across many examples of initiating Socket.io connections and SockJ, I have been unable to find any that utilise STOMP that work. I am looking for an example or library that may be able to help me.</p>
  <h1>What I've Tried</h1>
  <p>While researching I have come across, and attempted to use the following example just to get things up and running:</p>
  <pre><code>import SockJS from 'sockjs-client'
  import Stomp from 'stomp'
  
  var stompClient = null;
  
  const ws_url = 'MYURL'
  const token = 'MYTOKEN'
  
  export const setupSocket = (dispatch) =&gt; {
   var socket = new SockJS(ws_url+token);
   stompClient = Stomp.over(socket);  
   stompClient.connect({}, function(frame) {
      setConnected(true);
      console.log('Connected: ' + frame);
      stompClient.subscribe('MY TOPIC', function(messageOutput) {
         console.log(messageOutput);
      });
      }
   );
  } 
  </code></pre>
  <p>This presented me with an error stating that 'stomp.default.over' is not a function (I looked at <a href="https://stackoverflow.com/questions/41063968/in-spring-using-websockets-getting-this-error-uncaught-type-error-onrecieve-is">this fix</a> but it is not applicable)</p>
  <p>I have been able to successfully create a connection with sockJS without STOMP.</p>
  <h1>Extra Details</h1>
  <ul>
  <li>I am not looking for a component based solution as middleware seems
  to be the best practise (otherwise something like
  <a href="https://www.npmjs.com/package/react-stomp" rel="nofollow noreferrer">react-stomp</a> would be
  perfect!).</li>
  <li>A solution utilising <em>thunk</em> would be great as I already
  am using it elsewhere in the application.</li>
  <li>Changing to another protocol is not possible.</li>
  </ul>