Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 23

Discussione: Creazione chat

  1. #1

    Creazione chat

    Salve, dovrei creare una piccola chat per un sito, visto che fino ad ora ho creato solo sistemi di commenti e simili mi viene qualche dubbio in proposito.
    Teoricamente potrei creare una specie di grande rettangolo con un sistema ajax che inserisce le varie frasi scritte ed effettua il refresh ogni 2 secondi(per esempio).
    Il problema è che con questo metodo otterrei una "piccola finestrella per commenti in ajax", e non una vera e propia chat.
    Posso fare così, o mi dovrei provare ad usare applicazioni tipo flash?
    Tenete presente che fatta con le conoscenze che ho ora non sarebbe altro che un riquadro per commenti con un piccolo refresh, che verrebbe scambiato erroneamente per chat dall'occhio umano^^.
    Se avete suggerimenti, commenti o esempi da mostrare postate pure.

  2. #2
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    È una cosa complicatissima. Io ti posso dare il "la" (con esempi presi in giro tra i miei file), ma credo che demorderai prestissimo. Comincia con lo studiarti quest'argomento: https://developer.mozilla.org/en-US/...er-sent_events e col crearti le seguenti tre pagine:

    index.html (la chat):

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Chat</title>
    <script type="text/javascript">
    var createChat = (function () {
    
    	function updateOutput (oEvent) {
    		var oNewElement = document.createElement("p");
    		oNewElement.innerHTML = "message: " + oEvent.data;
    		this.output.appendChild(oNewElement);
    	}
    
    	function inputResponse () {
    		if (this.responseText.trim() !== "message sent") {
    			// in caso di errore...
    			alert(this.responseText);
    		}
    	}
    
    	function chatting (oEvent) {
    		if ((oEvent || window.event).keyCode !== 13) { return true; }
    		var oReq = new XMLHttpRequest();
    		oReq.onload = inputResponse;
    		oReq.open("post", "write.php", true);
    		oReq.setRequestHeader("Content-Type", "application\/x-www-form-urlencoded");
    		oReq.send("message=" + escape(this.innerHTML));
    		this.innerHTML = "";
    		return false;
    	}
    
    	return function (oParent) {
    		var oStream = new EventSource("stream.php"), oContainer = document.createElement("div"), oInput = document.createElement("div");
    		oStream.output = document.createElement("div");
    		oContainer.className= "chat-container"
    		oInput.className = "chat-input";
    		oInput.contentEditable = true;
    		oInput.onkeypress = chatting;
    		oStream.output.className = "chat-output";
    		oStream.onmessage = updateOutput;
    		oContainer.appendChild(oStream.output);
    		oContainer.appendChild(oInput);
    		oParent.appendChild(oContainer);
    
    	};
    
    })();
    
    onload = function () {
    	createChat(document.body);
    };
    
    </script>
    <style type="text/css">
    
    div.chat-container {
    	width: 402px;
    	padding: 10px;
    	border: 1px #cccccc solid;
    }
    
    div.chat-output {
    	width: 400px;
    	height: 200px;
    	border: 1px #cccccc solid;
    	overflow: auto;
    }
    
    div.chat-input {
    	width: 400px;
    	height: 20px;
    	border: 1px #cccccc solid;
    }
    
    </style>
    </head>
    
    <body>
    
    </body>
    </html>
    stream.php (il generatore di output - si tratta di un output casuale in questo caso):

    codice:
    <?php
    
    	// questo e' un generatore di eventi casuale
    
    	date_default_timezone_set("America/New_York");
    	header("Content-Type: text/event-stream");
    
    	$counter = rand(1, 10);
    	while (1) {
    		// Every second, sent a "ping" event.
    	
    		echo "event: ping\n";
    		$curDate = date(DATE_ISO8601);
    		echo 'data: {"time": "' . $curDate . '"}';
    		echo "\n\n";
    	
    		// Send a simple message at random intervals.
    	
    		$counter--;
    	
    		if (!$counter) {
    			echo 'data: This is a message at time ' . $curDate . "\n\n";
    			$counter = rand(1, 10);
    		}
    	
    		ob_flush();
    		flush();
    		sleep(1);
    	}
    ?>
    write.php (la pagina che deve curare di ricevere i nuovi messaggi):

    codice:
    <?php
    	header("Content-Type: text/plain");
    
    	if (isset($_POST["message"])) {
    		$new_message = $_POST["message"];
    		// fai qualcosa con $new_message (il messaggio inviato)... e poi...:
    		echo "message sent";
    	} else {
    		echo "error";
    	}
    
    ?>
    Per rendere funzionante il tutto devi studiarti i sockets in php: http://devzone.zend.com/209/writing-...ervers-in-php/. Buona fortuna!
    Tutto ciò che fai con jQuery puoi farlo meglio e con la metà del codice in puro JavaScript.

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    Puoi dare un occhiata QUI

    Per una bella risata vai QUI

  4. #4
    Grazie per le risposte.
    Prima dirispondervi per bene è meglio che veda tutto, il sistema proposto già l'ho provato e ho capito più o meno quello che succede (anche se non ho capito perchè l'esempio è strutturato per mandare l'alert all'invio del messaggio e non per aggiungerlo all'interno del sistema chat, come avviene per il messaggio generato in automatico).
    Devo rivedere questi maledetti sockets(dovevo usarli in passato per passare delle informazioni ad una pagina, ma riuscii a trovare un metodo alternativo).
    Comunque in genere non demordo se non ci passo almeno una decina di giorni .

    P.S. per nobody33: ho dato uno sguardo ai link, ma non ho trovato quello che cerco, comunque continuerò a cercare anche lì.

  5. #5
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Originariamente inviato da _Marco_87
    anche se non ho capito perchè l'esempio è strutturato per mandare l'alert all'invio del messaggio e non per aggiungerlo all'interno del sistema chat, come avviene per il messaggio generato in automatico
    L'alert ti compare in caso di invio fallito e per ora ti serve solo come debug. Dovrai sostituirlo tu con qualcos'altro.
    Tutto ciò che fai con jQuery puoi farlo meglio e con la metà del codice in puro JavaScript.

  6. #6
    Scusami ma io il codice l'ho modificato così sull'echo per fare una prova:
    Codice PHP:
    <?php
        header
    ("Content-Type: text/plain");

        if (isset(
    $_POST["message"])) {
            
    $new_message $_POST["message"];
            
    // fai qualcosa con $new_message (il messaggio inviato)... e poi...:
            
    echo "messaggio inviato:"$new_message;
        } else {
            echo 
    "error";
        }

    ?>
    E mi genera un alert con scritto: "messaggio inviato: ciao"(per esempio).
    Non ho modificato ancora gli alri due file, tranne un punto il cui mancava ";" alla fine di una riga.


    Aggiunto dopo:
    codice:
    	function inputResponse () {
    		if (this.responseText.trim() !== "message sent") {
    			// in caso di errore...
    			alert(this.responseText);
    		}
    	}
    Hai ragione, è questo pezzo di codice che genera l'alert, scusa ma adesso ho cominciato a vederlo...

  7. #7
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Se la pagina non riceve un echo contenente esattamente il testo "message sent" lo considera un errore e ti scatena un alert. Puoi modificarlo per fare tutte le prove che vuoi, ma quando il codice sarà definitivo dovrai far sì che l'echo torni su "message sent" (o almeno così l'avevo impostato io).
    Tutto ciò che fai con jQuery puoi farlo meglio e con la metà del codice in puro JavaScript.

  8. #8
    Quindi sarei in questa situazione ipotetica:
    Codice PHP:
    echo "message sent";//non genera l'errore ma non scrive nulla 
    echo "ciao";//genera un alert con valore=ciao 
    Quello che non capisco è dove inserire l'echo di $new_message per stampare a video il messaggio, visto che dove se metto l'echo mi dà l'alert e se non lo metto pagina bianca.

  9. #9
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Originariamente inviato da _Marco_87
    Quindi sarei in questa situazione ipotetica:
    Codice PHP:
    echo "message sent";//non genera l'errore ma non scrive nulla 
    echo "ciao";//genera un alert con valore=ciao 
    yesss


    Originariamente inviato da _Marco_87
    Quello che non capisco è dove inserire l'echo di $new_message per stampare a video il messaggio, visto che dove se metto l'echo mi dà l'alert e se non lo metto pagina bianca.
    Nessun echo da parte di write.php contenente il nuovo messaggio. È la pagina stream.php che manda i nuovi messaggi!
    Tutto ciò che fai con jQuery puoi farlo meglio e con la metà del codice in puro JavaScript.

  10. #10
    Ti scrivo quello che teoricamente dovrei fare(ho dovuto leggere più di una documentazione e ancora non ho finito).
    Spero che le mie conoscene in ajax siano sufficienti da unire ai sockets, comunque eccoti uno schema:
    codice:
    																										        -----> Il commento viene salvato in una tabella
                           -->javascript definisce le variabili da																				|
                        -    prendere e stampa il contenuto della chat,																			|
    			 compresi eventuali commenti precedenti																	                        |
     chat             -    																								-->La pagina di elaborazione .php che riceve i dati
    ajax/sockets   -->																								li ricava con un semplice POST da una funzione tipo "fputs($sock..$messaggio)"
                         -   																							scritta nella prima pagina
                          -->con i socket creo un'altra connessione																				|
    			(da quello che ho capito devo definire una nuova				 	--> javascript controllerà eventuale presenza di errori				                        |
    			connessione socket per usarli) e trasporto i contenuti				       (posso controllare anche parole non consone, ecc)e controllerà				                |
    			da stampare (chat)  alla pagina che li tratterà	                                         l'avvio del processo socket(invio messaggio) secondo i canoni                                          |
    														metterò	(oppure lo farà php -- molto probabilmente la chat verrà disabilita                             |
    														per i "non loggati")									                |
    																										        |
    	<------------			                             										il contenuto torna alla prima pagina che lo stampa		<---------
    fammi sapere se grossomodo è così, in caso contrario ho capito male delle cose.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.