2012-05-29 54 views
3

我有一些神的想法,但我有一些問題...如何連接Facebook的用戶到節點的應用程序 - socket.ioFacebook和socket.io的node.js

我創建了一個socket.io聊天但現在想讓Facebook用戶來聊天來創建類似Facebook的羣聊。我認爲這個想法很好?

這裏是我的聊天代碼:

服務器端的文件 - app.js

var app = require('express').createServer() 
var io = require('socket.io').listen(app); 

app.listen(8080); 

// routing 
app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 

// usernames which are currently connected to the chat 
var usernames = {}; 

// rooms which are currently available in chat 
var rooms = ['room1','room2','room3']; 

io.sockets.on('connection', function (socket) { 

    // when the client emits 'adduser', this listens and executes 
    socket.on('adduser', function(username){ 
     // store the username in the socket session for this client 
     socket.username = username; 
     // store the room name in the socket session for this client 
     socket.room = 'room1'; 
     // add the client's username to the global list 
     usernames[username] = username; 
     // send client to room 1 
     socket.join('room1'); 
     // echo to client they've connected 
     socket.emit('updatechat', 'SERVER', 'you have connected to room1'); 
     // echo to room 1 that a person has connected to their room 
     socket.broadcast.to('room1').emit('updatechat', 'SERVER', username + ' has connected to this room'); 
     socket.emit('updaterooms', rooms, 'room1'); 
    }); 

    // when the client emits 'sendchat', this listens and executes 
    socket.on('sendchat', function (data) { 
     // we tell the client to execute 'updatechat' with 2 parameters 
     io.sockets.in(socket.room).emit('updatechat', socket.username, data); 
    }); 

    socket.on('switchRoom', function(newroom){ 
     // leave the current room (stored in session) 
     socket.leave(socket.room); 
     // join new room, received as function parameter 
     socket.join(newroom); 
     socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom); 
     // sent message to OLD room 
     socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room'); 
     // update socket session room title 
     socket.room = newroom; 
     socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room'); 
     socket.emit('updaterooms', rooms, newroom); 
    }); 

    // when the user disconnects.. perform this 
    socket.on('disconnect', function(){ 
     // remove the username from global usernames list 
     delete usernames[socket.username]; 
     // update list of users in chat, client-side 
     io.sockets.emit('updateusers', usernames); 
     // echo globally that this client has left 
     socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); 
     socket.leave(socket.room); 
    }); 
}); 

和index.html

<script src="/socket.io/socket.io.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    var socket = io.connect('http://localhost:8080'); 

    // on connection to server, ask for user's name with an anonymous callback 
    socket.on('connect', function(){ 
     // call the server-side function 'adduser' and send one parameter (value of prompt) 
     socket.emit('adduser', prompt("What's your name?")); 
    }); 

    // listener, whenever the server emits 'updatechat', this updates the chat body 
    socket.on('updatechat', function (username, data) { 
     $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>'); 
    }); 

    // listener, whenever the server emits 'updaterooms', this updates the room the client is in 
    socket.on('updaterooms', function(rooms, current_room) { 
     $('#rooms').empty(); 
     $.each(rooms, function(key, value) { 
      if(value == current_room){ 
       $('#rooms').append('<div>' + value + '</div>'); 
      } 
      else { 
       $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>'); 
      } 
     }); 
    }); 

    function switchRoom(room){ 
     socket.emit('switchRoom', room); 
    } 

    // on load of page 
    $(function(){ 
     // when the client clicks SEND 
     $('#datasend').click(function() { 
      var message = $('#data').val(); 
      $('#data').val(''); 
      // tell server to execute 'sendchat' and send along one parameter 
      socket.emit('sendchat', message); 
     }); 

     // when the client hits ENTER on their keyboard 
     $('#data').keypress(function(e) { 
      if(e.which == 13) { 
       $(this).blur(); 
       $('#datasend').focus().click(); 
      } 
     }); 
    }); 

</script> 
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> 
    <b>ROOMS</b> 
    <div id="rooms"></div> 
</div> 
<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;"> 
    <div id="conversation"></div> 
    <input id="data" style="width:200px;" /> 
    <input type="button" id="datasend" value="send" /> 
</div> 

以及如何讓用戶來用CHTA通過fbLogin按鈕他們的Facebook賬號:

這裏是FB登錄代碼,而是如何implemetŧ他的代碼添加到我的聊天腳本中,以允許用戶使用Facebook帳戶。

<button id="fb-auth">Login</button> 

<script> 
function updateButton(response) { 
    Log.info('Updating Button', response); 
    var button = document.getElementById('fb-auth'); 

    if (response.status === 'connected') { 
    button.innerHTML = 'Logout'; 
    button.onclick = function() { 
     FB.logout(function(response) { 
     Log.info('FB.logout callback', response); 
     }); 
    }; 
    } else { 
    button.innerHTML = 'Login'; 
    button.onclick = function() { 
     FB.login(function(response) { 
     Log.info('FB.login callback', response); 
     if (response.status === 'connected') { 
      Log.info('User is logged in'); 
     } else { 
      Log.info('User is logged out'); 
     } 
     }); 
    }; 
    } 
} 
+0

tryied在某些方面,但沒有工作 –

+3

*什麼*你試過嗎?你不能只在這裏拋出大量未完成的代碼,並期望其他人爲你完成它。更具體地說*你嘗試了什麼*以及*什麼*不適合你。 – chesles

回答

-1

我已經做了一些與此類似:http://codemygenes.appspot.com/nodejs/fbchat/fbchat.html。但它太難理解了。我在Heroku上部署了一個socket.io聊天(node.js App)。我也使用Facebook身份驗證。爲此我遵循以下幾點:

  1. 轉到http://developers.facebook.com/docs/reference/api/。他們有一個關於Graph API的整潔文檔。

  2. 你要部署在服務器應用程序(如Heroku的,甚至你本地主機!)。

  3. 在Facebook上

    註冊應用。 http://developers.facebook.com/apps

  4. Facebook將給你的應用程序一個ID & Client_secret代碼。並且您必須每次使用該ID &密碼驗證應用程序。

簡而言之,轉到Facebook的圖形API文檔和你都在那裏......

查看演示here

0

我在我的應用程序蛇正梯子多人做過類似的事( https://apps.facebook.com/snakes-n-ladders/)。您需要在服務器上對用戶進行身份驗證。

庫我使用的:Facebook的節點SDK。

你需要把餅乾:真實而初始化的JavaScript SDK。因此,在客戶端進行身份驗證的用戶將在服務器上進行身份驗證。

FB.init({ 
    appId  : 'YOUR_APP_ID', // App ID 
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File 
    status  : true, // check login status 
    cookie  : true, // enable cookies to allow the server to access the session 
}); 

閱讀facebook-node-sdk的文檔,您將在服務器上的所有用戶信息。您可以將數據附加到套接字會話。