eckig und sockel io klassenmanipulation

Ich baue eine Chat-App mit eckigen auf der Vorderseite und Sockel io für die Chat-Plattform.eckig und sockel io klassenmanipulation

Ich möchte eine andere CSS-Klasse für den Absender im Chat haben (derjenige, der die Nachricht im Chat sendet) und für die Seite, die die Nachricht erhält.

zu tun, dass ich 2 Klassen in meinem CSS erstellt habe: "Sender" und "Empfänger".

Ich möchte, dass, wenn mein Sockel eine Nachricht vom "Absender" bekommt (aka "die Lautsprecherseite") - die Li-Klasse wird "Absender" sein. Wenn der Socket eine Nachricht von außen erhält (ein anderes Mitglied im Chat ist das nicht ich), wird die Klasse "Empfänger" sein.

wie die grünen und weißen hier: http://www.androidpolice.com/wp-content/uploads/2015/07/nexus2cee_whatsapp-middle-finger-2.png

Ich weiß, dass ich die Klasse in angluar ändern kann die ng-Klasse Direktive.

Das Problem ist, dass, wenn ich die Klasse manipuliere alle die Nachrichten in meinem Chat wurde ein Teil dieser Klasse (ich benutze ng-Repeat-Direktive).

und was ich will, ist, dass ein Nachrichtenklasse A sein wird und andere Nachricht wird von der Klasse B und dritte Nachricht wird Klasse A sein .... so weiter ...

Ich weiß, dass ich sollte irgendwie verwenden Sie die ng-Klasse propertie wie:

<li ng-class={'sender' : message.sender, 'btn-off' : !message.sender} ng-repeat="message in messages track by $index">{{message}}</li>

aber wie kann ich die Meldung Objekt zu erhalten (was ein String ist ein boolean auch enthalten

können Sie mir bitte helfen, herauszufinden, wie ich kann? schreibe den Code dafür?

das ist mein Controler

mymodule.controller("cntrlChat", ['$scope', 'myService','$q','$timeout', 
    function($scope, myService,$q,$timeout){ 
    var socket = io(); 
    $scope.messages = []; 
    $scope.message_type="sender"; 
    $scope.room= myService.get().room; 
    $scope.name= myService.get().name; 
    socket.emit('room', $scope.room); 

    $scope.submit=function(){ 
    socket.emit('chat_message',{ room: $scope.room, msg: $scope.name+": "+$scope.insertedText }); 
    $scope.message_type="sender"; 
    $scope.messages.push($scope.name+": "+$scope.insertedText); 
    $scope.insertedText=''; 
    return false; 
    } 

    socket.on('chat_message', function(msg){ 
    $scope.$apply(function() { 
     $scope.message_type="receiver"; 
     $scope.messages.push(msg); 

    }); 
    }); 

    socket.on('info_message', function(msg){ 
    $scope.$apply(function() { 
     $scope.info=msg; 
    }); 
    });

dies die server.js Datei ist:

var express = require('express'); 
var app = express(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var path = require('path'); 


app.use(express.static(path.join(__dirname, '/'))); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/Index.html'); 
}); 

io.on('connection', function(socket){ 
    io.emit('chat_message', "welcome"); 

    socket.on('room', function(room) { 
     socket.join(room); 
    }); 

    socket.on('chat_message', function(data){ 
     socket.broadcast.to(data.room).emit('chat_message',data.msg); 
    }); 
    socket.on('info_message', function(data){ 
     socket.broadcast.to(data.room).emit('info_message',data.msg); 
    }); 

    socket.on('disconnect', function(){ 
     io.emit('chat message', "Bye"); 

    }); 

}); 

http.listen((process.env.PORT || 3000), function(){ 
    console.log('listening on *:3000 '+ __dirname); 
});

dies ist der HTML-Code für mein Chat:

<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <div class="chat"> 
     <div class="members"> 
      {{users}} 
     </div> 
     <div class="messages"> 
      <ul> 
       <li ng-class="message_type" ng-repeat="message in messages track by $index">{{message}}</li> 

      </ul> 
     </div> 
     <form ng-submit="submit()"> 
      {{info}} 
      <br> 
      <input autocomplete="off" ng-model="insertedText" ng-change="isUserTyping()" type="text" /> 
      <button type="button" ng-click="submit()"> 
       Send 
      </button> 
     </form> 
    </div> 
</body>

Quelle

2016-07-17 Matoy

Ok Schauen wir uns diese einen Riss nehmen .

Bei einer Beschreibung auf hoher Ebene möchten wir, dass der Socket Nachrichten zwischen Benutzern weitergibt.

Der beste Weg, um sicherzustellen, dass wir wissen, wer gesendet hat, um sicherzustellen, dass die von uns übergebenen Daten die richtigen Details enthalten.

Mit diesem wird gesagt, man muss nur die msg aus einer Zeichenfolge zu einem Objekt drehen und um mit einer Fahne übergeben (I verwendet Sender/Empfänger, Sie Absender verwenden können: true/false):

$scope.submit=function(){ 
    // 
    // change msg to an object (I don't know io well so it may need to be json encoded decoded?) 
    // 
    socket.emit('chat_message', { 
     room: $scope.room, 
     msg: { 
      text: $scope.name+": "+$scope.insertedText, 
      status: 'sender' 
     } 
    }); 

    // 
    // push the data obj to your messages array 
    // 
    $scope.messages.push(msg) 

    $scope.insertedText=''; 
    return false; 
    } 

    socket.on('chat_message', function(data){ 
    $scope.$apply(function() { 
     // 
     // we expect data to look like the data above except we'll change the flag when it's retrieved 
     // 
     data.status = 'received' 
     $scope.messages.push(data); 
    }); 
    }); 

    socket.on('info_message', function(msg){ 
    $scope.$apply(function() { 
     $scope.info=msg; 
    }); 
    });

Wir übergeben nun Objekte mit Flags vom und zum Knotenserver ohne Änderungen auf der Serverseite, sodass der Code überhaupt nicht geändert werden muss.

Schließlich wird der Winkelteil:

<div class="chat"> 
    <div class="members"> 
     {{users}} 
    </div> 
    <div class="messages"> 
     <ul> 
      // 
      // ng class stuff 
      // (ternary) ng-class="message.status === 'received' ? 'class1' : 'class2'" 
      // 
      <li ng-class="{'class1': message.status === 'sender', 'class2': message.status === 'received'}" ng-repeat="message in messages track by $index">{{message.text}}</li> 
     </ul> 
    </div> 
    <form ng-submit="submit()"> 
     {{info}} 
     <br> 
     <input autocomplete="off" ng-model="insertedText" ng-change="isUserTyping()" type="text" /> 
     <button type="button" ng-click="submit()"> 
      Send 
     </button> 
    </form> 
</div>

Quelle

2016-07-18 04:12:34 Dreamlines

eckig und sockel io klassenmanipulation

Antwort

Verwandte Themen