jQuery+CSS activity stream παρομοιο με το facebook ticker

x_maras · 19 Ιουνίου 2012

Έχω φτιάξει ένα activity stream με node.js και socket.io το οποίο ναι μεν δουλεύει κανονικά, αλλά είναι άσχημο... Ψάχνω τις τελευταίες 2 μέρες για κάποιο έτοιμο κώδικα για το σουλουπώσω λίγο, αλλά δεν έχω βρει κάτι αξιόλογο.

Θέλω το αποτέλεσμα να είναι παρόμοιο με το facebook ticker ,

δηλαδή εμφανίζω τον αριθμό των τελευταίων 5-10 μηνυμάτων,

όταν ένα νέο μήνυμα γίνεται push τότε το 11ο (τελευταίο εξαφανίζεται)

όταν φτάνω sto bottom φορτώνει τα επόμενα 10.

Τα μηνύματα μπορώ να τα εμφανίσω σε ζωντανό χρόνο στο browser με το παρακάτω κώδικα:

Επίσης τα τελευταία 100 τα αποθηκεύω σε ένα "set" στη redis, αλλά προς το παρόν θα ήθελα να εμφανίζω/κρύβω μόνο αυτά που είναι ήδη στο browser. Δηλαδή σε περίπτωση που κάνω refresh τον browser να παίρνω άδεια οθόνη.

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

       socket.on('message', function(message){
  			$('#content').prepend(message + '<br />');
       });
   </script>
</head>
<body>
<div>Check the message:</div>
   <div id="content"></div>
</body>
</html>

Αν γνωρίζετε κάποιον έτοιμο κώδικα για να κάνω τα παραπάνω θα με βοηθούσατε αρκετά.

υ.γ.

Ο κώδικα που έκανα ποστ πιο πάνω είναι αρκετά απλοποιημένος και το message που τυπώνει είναι ένα απλό string. Στο κανονικό διαβάζω ένα json, από το οποίο δημιουργό το μήνυμα, αλλά ο τρόπος που το εμφανίζω στο browser είναι ο ίδιος.

Σύνδεση

jQuery+CSS activity stream παρομοιο με το facebook ticker

Προτεινόμενες αναρτήσεις

x_maras

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση