JSFiddle - React, Tailwind, and code Playground

by Winter Soldier

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>
<body>
  <div id='page'>
    <div id='incomingChatMessages'>

    </div>
  </div>
</body>

JavaScript

requirejs.config({
  paths: {
    'socket.io': 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io',
    'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min',
    'underscore': 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min',
    'backbone': 'https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min'
  },
  waitSeconds: 3
});

var SampleView;
var view;
var socket;

initiateSocket = function() {
// basically your socket logic goes here
var socket = io('http://3dp-elhs.rhcloud.com:8000/')
  socket.on('connect', function() {
    Backbone.trigger("socket:connect");
  });

  socket.on('message', function(message) {
    Backbone.trigger("socket:message");
  });
}

initiateBackbone = function() {
  SampleView = Backbone.View.extend({

    el: $("#page"),

    initalize: function() {
      Backbone.on("socket:connect", this.connect, this);
      Backbone.on("socket:message", this.message, this);
      this.render();
    },

    render: function() {
      console.log("home view");
      this.$el.html("Welcome to View");
    },

    events: {
      'keypress #outgoingChatMessage': 'processOutgoingMessage'
    },

    connect: function(event) {
      $('#incomingChatMessages').append($('<li>Connected</li>'));
    },

    message: function(event) {
      $('#incomingChatMessages').append($('<li></li>').text("message"));
    },

    processOutgoingMessage: function(e) {
      console.log("Outgoing Message Processed");
      if (e.which == 13) {
        event.preventDefault();
      }
    },

    initiateSocket: function() {
      require(['socket.io'], function(io) {        
       initiateSocket(io);
      });
    }
  });
}


require(['jquery', 'underscore', 'backbone'], function(jq, us, bb) {
  initiateBackbone();
  view = new SampleView();
  view.initiateSocket();
});