Added initial web-socket communication to the client page.

app/assets/javascripts/JamServer.js

@@ -0,0 +1,96 @@
+// The wrapper around the web-socket connection to the server
+(function(global, $) {
+    var server = {};
+    
+    // Let socket.io know where WebSocketMain.swf is
+    WEB_SOCKET_SWF_LOCATION = "assets/flash/WebSocketMain.swf";
+
+    server.socket = {};
+    server.singedIn = false;
+    server.dispatchTable = {};
+
+    // TODO: Create the message factory here
+    //server.messageFactory = global.message_factory;
+
+    server.registerMessageCallback = function(messageType, callback) {
+        if (server.dispatchTable[messageType] === undefined) {
+            server.dispatchTable[messageType] = [];
+        }
+        
+        server.dispatchTable[messageType].push(callback);
+    };
+    
+    server.unregisterMessageCallback = function(messageType, callback) {
+        if (server.dispatchTable[messageType] !== undefined) {
+            for(var i = server.dispatchTable.length; i--;) {
+                if (server.dispatchTable[messageType][i] === callback)
+                {
+                    server.dispatchTable[messageType].splice(i, 1);
+                    break;
+                }
+            }
+        }
+        
+        if (server.dispatchTable[messageType].length == 0) {
+            delete server.dispatchTable[messageType];
+        }
+    };
+
+    server.connect = function() {
+        server.registerMessageCallback(LOGIN_ACK, function() { server.signedIn = true; });
+    
+        server.socket = new WebSocket(gon.websocket_gateway_uri);
+        server.socket.onopen = server.onOpen;
+        server.socket.onmessage = server.onMessage;
+        server.socket.onclose = server.onClose;
+    };
+    
+    server.onOpen = function() {
+        var token, loginMessage;
+
+        token = $.cookie("remember_token");
+        loginMessage = global.message_factory.login_with_token(token);
+
+        server.send(loginMessage);
+    };
+
+    server.onMessage = function(e) {
+        var message = JSON.parse(e.data),
+            payload = message[message.type.toLowerCase()],
+            callbacks = server.dispatchTable[message.type];
+        
+        if (callbacks !== undefined) {
+            for(var i = callbacks.length; i--;) {
+                callbacks[i](payload);
+            }
+        }
+        else {
+            console.log("Unexpected message type %s.", message.type);
+        }
+    };
+
+    server.onClose = function() {
+        console.log("Socket to server closed.");
+        // TODO: reconnect
+    };
+    
+    server.send = function(message) {
+        server.socket.send(JSON.stringify(message));
+    };
+    
+    server.loginSession = function(sessionId) {
+        var loginMessage;
+    
+        if (!signedIn) {
+            console.log("Not signed in!");
+            // TODO: surface the error
+            return;
+        }
+    
+        loginMessage = global.message_factory.login_jam_session(sessionId);
+        server.send(loginMessage);
+    };
+
+    global.JamServer = server;
+
+})(window, jQuery);

app/controllers/clients_controller.rb

@@ -1,9 +1,14 @@
 class ClientsController < ApplicationController
 
+  include UsersHelper
+
   # have to be signed in currently to see this screen
   before_filter :signed_in_user
 
   def index
+    # use gon to pass variables into javascript
+    gon.websocket_gateway_uri = Rails.application.config.websocket_gateway_uri
+
     # don't use the rails tutorial layout for this page
     render :layout => 'client'
   end

app/helpers/users_helper.rb

@@ -1,11 +1,12 @@
 module UsersHelper
 
   # Returns the Gravatar (http://gravatar.com/) for the given user.
-  def gravatar_for(user, options = { size: 50 })
+  def gravatar_for(user, options = { size: 50, hclass: "gravatar" })
     gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
     size = options[:size]
+    hclass = options[:hclass]
     gravatar = 
     gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}"
-    image_tag(gravatar_url, alt: user.name, class: "gravatar")
+    image_tag(gravatar_url, alt: user.name, class: "#{hclass}")
   end
 end

app/views/clients/index.html.erb

@@ -2,16 +2,13 @@
         <div layout="header" class="header">
             <h1>JamKazam</h1>
             <div class="userinfo">
-                <%= image_tag "avatars/avatar_jonathon.png", :class=> "avatar medium" %>
+                <%= gravatar_for current_user, size: 52, hclass: "avatar medium" %>
                 <div class="username">
-                    <h2>Jonathon Wilson</h2>
+                    <h2><%= current_user.name %></h2>
                     <%= image_tag "down_arrow.png", :class=> "profile-toggle" %>
                     <ul>
                         <li>Profile</li>
-                        <li>Log Out</li>
-                        <li>Log Out</li>
-                        <li>Log Out</li>
-                        <li>Log Out</li>
+                        <li><%= link_to "Sign out", signout_path, method: "delete" %></li>
                     </ul>
                 </div>
             </div>
@@ -388,6 +385,15 @@
         $(function() {
             var jk = JamKazam();
             jk.initialize();
+
+            window.JamServer.registerMessageCallback(
+                LOGIN_ACK, 
+                function(payload) { 
+                    // TODO: Get a list of sessions and update in the UI to enable joining
+                    alert("Logged in from IP: " + payload.public_ip); 
+                });
+
+            window.JamServer.connect();
         })
     </script>
 

config/application.rb

@@ -66,7 +66,7 @@ module SampleApp
     config.assets.version = '1.0'
 
     # Runs the websocket gateway within the web app
-    config.websocket_gateway_uri = "ws://localhost:6767/websocket"
+    config.websocket_gateway_uri = "ws://ubuntu:6767/websocket"
 
     # Add the assets/fonts directory to assets.paths
     config.assets.paths << "#{Rails.root}/app/assets/fonts"