Integrar AjaxChat con WordPress

This tutorial has been deprecated..

read the update tutorial http://vcomputadoras.com/ajaxchat-wordpress-integration/

Bueno,
Hace algun tiempo buscaba un chat script que fuera bueno y gratis y que pudiera conectarse a la base de datos de WordPress, pues bueno me encontré con algunos y me gustaron 2 que son:

El primero es excelente si tienes un foro la version actual ajax_chat-0.8.3, utiliza ajax para actualizar el contenido en el chat, además lo podes usar con el Comet socket que es escrito en Ruby y que te ayuda a tener mas de 100 personas chateando, el problema con el que me enfrente al querer usar este chat script, fue el que no había una integración a wordpress , pues es mas para foros scripts entonces decidí que no era el mas adecuado, me decidí a usar PHPFREECHAT el cual uso, pero días atrás decidí probar el chat AJAXCHAT y ahora que entiendo un poco mas de PHP decidí que era hora de tratar de integrarlo.

Esta integración fue probada para WordPress 2.92 pero debería funcionar para versiones mas actuales i o versiones mas antiguas..
Tiene auto login, administración y moderación, guest login (detecta si el nick que se quiere usar ya esta registrado en WordPress, si lo esta te da un error y no te permite entrar al chat.. …

Sigue los siguiente para hacer la integración usaremos la versión mas actual que es ajax_chat-0.8.3..

  1. Instala el chat de la forma básica, sigue el procedimiento que indica el Readme.txt que esta en archivo de instalación del script de phpfreechat.
  2. La integración esta echa de forma tal que el el archivo del ajaxchat esta en el la raíz del sitio web.. ejemplo “www.tusitio.com/chat ” y los documentos tu blog esta sentado en un folder llamado blog en la raiz de tu sitio ejemplo “www.tusitio.com/blog/”.
  3. Abre el archivo “lib” que se localiza en -> ” /chat/lib/ ” en este archivo encontraras un documento php llamado “custom.php” ábrelo con tu editor php que uses, recomiendo notepad++ para la edición de cualquier archivo php, html, etc.. en el copiamos lo siguiente:
    <?php
    /*
     * @package AJAX_Chat
     * @author Sebastian Tschan
     * @copyright (c) Sebastian Tschan
     * @license GNU Affero General Public License
     * @link https://blueimp.net/ajax/
     * @Wordpress integration by Neu V aka UTAN
     */
    
    // Include custom libraries and initialization code here
    require_once('../blog/wp-config.php');
    require_once(ABSPATH . WPINC . '/registration.php');
    $current_user = wp_get_current_user();
    $user_name = addslashes($current_user->display_name);
    $user_id=($current_user->ID);
    ?>
    

    Lo que este el código php hace es darle a las variables $user_name, $user_id la información requerida de WordPress que sera pasada al chat, las dos variables son importantes pues son requeridas para dar un nick y el ID de el nick..

  4. Las siguiente parte es abrir el documento php “CustomAJAXChat.php”
    localizado en -> “/chat/lib/class/ “.

    <?php
    /*
     * @package AJAX_Chat
     * @author Sebastian Tschan
     * @copyright (c) Sebastian Tschan
     * @license GNU Affero General Public License
     * @link https://blueimp.net/ajax/
    * @Wordpress integration by Neu V aka UTAN
     */
    
    class CustomAJAXChat extends AJAXChat {
    	 // lets allow auto login to wp users.
       function initCustomRequestVars(){
       if(!$this->getRequestVar('logout') && (is_user_logged_in())) {
          $this->setRequestVar('login', true);
          }
        }
    	
       	function getValidLoginUserData() {
    	// globalize the important variables from WP
    	global $user_name,$user_id;
            // Check if we have a valid registered user:
    		$customUsers = $this->getCustomUsers();
            if(is_user_logged_in()){
    		$userData = array();
            $userData['userID'] =$user_id;
            $userData['userName'] =$user_name;
    		$user_name=$this->trimUserName($userData['userName']);
    		 if(current_user_can('delete_posts'))
                    $userData['userRole'] = AJAX_CHAT_ADMIN;
                     elseif($user_name == "NOMBRE")// convierte a admin 
                    $userData['userRole'] = AJAX_CHAT_MODERATOR;
    				else
                    $userData['userRole'] = AJAX_CHAT_USER;
                    return $userData;
    		}// Check if we have a valid registered user using the ajax chat form:
    		elseif($this->getRequestVar('password')) {
    			$userName = $this->getRequestVar('userName');
    			$userName = $this->convertEncoding($userName, $this->getConfig('contentEncoding'), $this->getConfig('sourceEncoding'));
    
    			$password = $this->getRequestVar('password');
    			$password = $this->convertEncoding($password, $this->getConfig('contentEncoding'), $this->getConfig('sourceEncoding'));
    
    			foreach($customUsers as $key=>$value) {
    				if(($value['userName'] == $userName) && ($value['password'] == $password)) {
    					$userData = array();
    					$userData['userID'] = $key;
    					$userData['userName'] = $this->trimUserName($value['userName']);
    					
    					$userData['userRole'] = $value['userRole'];
    					return $userData;
    				}
    			}
    
    			return null;
    		}else{
                // Guest users:
                return $this->getGuestUser();
            }
              
        }
    
    
    	// Store the channels the current user has access to
    	// Make sure channel names don't contain any whitespace
    	function &getChannels() {
    		if($this->_channels === null) {
    			$this->_channels = array();
    			
    			$customUsers = $this->getCustomUsers();
    			
    			// Get the channels, the user has access to:
    			if($this->getUserRole() == AJAX_CHAT_GUEST) {
    				$validChannels = $customUsers[0]['channels'];
    			} else {
    				//$validChannels = $customUsers[$this->getUserID()]['channels'];
    				$validChannels = $customUsers[0]['channels'];
    			}
    			
    			// Add the valid channels to the channel list (the defaultChannelID is always valid):
    			foreach($this->getAllChannels() as $key=>$value) {
    				// Check if we have to limit the available channels:
    				if($this->getConfig('limitChannelList') && !in_array($value, $this->getConfig('limitChannelList'))) {
    					continue;
    				}
    				
    				if(in_array($value, $validChannels) || $value == $this->getConfig('defaultChannelID')) {
    					$this->_channels[$key] = $value;
    				}
    			}
    		}
    		return $this->_channels;
    	}
    
    	// Store all existing channels
    	// Make sure channel names don't contain any whitespace
    	function &getAllChannels() {
    		if($this->_allChannels === null) {
    			// Get all existing channels:
    			$customChannels = $this->getCustomChannels();
    			
    			$defaultChannelFound = false;
    			
    			foreach($customChannels as $key=>$value) {
    				$forumName = $this->trimChannelName($value);
    				
    				$this->_allChannels[$forumName] = $key;
    				
    				if($key == $this->getConfig('defaultChannelID')) {
    					$defaultChannelFound = true;
    				}
    			}
    			
    			if(!$defaultChannelFound) {
    				// Add the default channel as first array element to the channel list:
    				$this->_allChannels = array_merge(
    					array(
    						$this->trimChannelName($this->getConfig('defaultChannelName'))=>$this->getConfig('defaultChannelID')
    					),
    					$this->_allChannels
    				);
    			}
    		}
    		return $this->_allChannels;
    	}
    
    	function &getCustomUsers() {
    		// List containing the registered chat users:
    		$users = null;
    		require(AJAX_CHAT_PATH.'lib/data/users.php');
    		return $users;
    	}
    	
    	function &getCustomChannels() {
    		// List containing the custom channels:
    		$channels = null;
    		require(AJAX_CHAT_PATH.'lib/data/channels.php');
    		return $channels;
    	}
    
    }
    ?>
    

    El documento contiene un PHP class, dentro de este existen funciones que integran todo el class, las mas importantes para integrar wordpress son las siguientes:

      function initCustomRequestVars()

      Esta funcion que detecta si la sesión esta iniciada , asi cuando una persona a iniciado sesión esta al entrar al chat le da el nick registrado. si no lo envia a la pagina con la donde esta FORMA para inicia sesión..

      function getValidLoginUserData()

      Esta funcion coloca el ID y el nick en un array y lo pasa al chat para que el usuario obtenga su nick registrado, si el nick tiene poderes “delete_posts”=” para borrar post” este se convierte en administrador,
      si quieres dar poderes de moderador a un nick registrado pero sin darle poderes en WordPress entonces edita la linea 31 en CustomAJAXChat.php con el nombre del nick registrado que quieres hacer moderador :

      elseif($user_name == "NOMBRE")

      este se convertir en moderador automáticamente al entrar al chat..

      function &getChannels()

      Esta funcion no es realmente importante para usar el chat en WordPress sin embargo para scripts de foros es la que pasa el canal el cual el usuario pertenece, como por defecto el chat trae el “$config[‘defaultChannelID’] = 0;” entonces solo pasamos este canal en la funcion ya que WordPress no tiene un canal especial para usuarios, puesto que es un blog… entonces usamos el canal por defecto.

      			if($this->getUserRole() == AJAX_CHAT_GUEST) {
      				$validChannels = $customUsers[0]['channels'];
      			} else {
      // deshabilitamos el canal que espera obtenar del array y ponemos el por defecto. 
      				//$validChannels = $customUsers[$this->getUserID()]['channels'];
      				$validChannels = $customUsers[0]['channels'];
      			}
      
  5. Ahora en mismo folder “/chat/lib/class” abrimos el documento “AJAXChat.php” buscamos con el notepad++ la funcion “function getGuestUser()”. Copia y pega el código abajo, desde la linea 3179 hasta la linea 3207, asegurarte de hacerlo bien o php te dara un error fatal, básicamente usamos las funcion username_exists() de wordpress para saber si el nick que se quiere usar esta registrado..
    Este es la parte importante si no quieres pegar toda la función ..

    	// Trim guest userName:
    			// check if usernick choosen as guest is in the WP database.. if its is Deny access.
    			$userName=$this->getRequestVar('userName');
    			if(username_exists($userName)){
    			return null;
    			}

    Si quieres pegar toda la función , copia y pegala empezando desde la linea 3179 hasta la linea 3207 que son las lineas que se encuentran en CustomAJAXChat.php, usa notepad++..

    function getGuestUser() {
    		if(!$this->getConfig('allowGuestLogins'))
    			return null;
    
    		if($this->getConfig('allowGuestUserName')) {
    			$maxLength =	$this->getConfig('userNameMaxLength')
    							- $this->stringLength($this->getConfig('guestUserPrefix'))
    							- $this->stringLength($this->getConfig('guestUserSuffix'));
    
    			// Trim guest userName:
    			// check if usernick choosen as guest is in the WP database.. if its is Deny access.
    			$userName=$this->getRequestVar('userName');
    			if(username_exists($userName)){
    			return null;
    			}
    			$userName = $this->trimString($this->getRequestVar('userName'), null, $maxLength, true, true);
    
    			// If given userName is invalid, create one:
    			if(!$userName) {
    				$userName = $this->createGuestUserName();
    			} else {
    				// Add the guest users prefix and suffix to the given userName:
    				$userName = $this->getConfig('guestUserPrefix').$userName.$this->getConfig('guestUserSuffix');	
    			}
    		} else {
    			$userName = $this->createGuestUserName();
    		}
    
    		$userData = array();
    		$userData['userID'] = $this->createGuestUserID();
    		$userData['userName'] = $userName;
    		$userData['userRole'] = AJAX_CHAT_GUEST;
    		return $userData;		
    	}
    
  6. Por ultimo para terminar la integración , cambiamos la forma por defecto de el AJAXCHAT para que funcione como la forma de WordPress donde iniciamos sesión:
    Abrimos el folder -> “/chat-ajaxchat/lib/template” y editamos el documento “loggedOut.php” y pegamos la forma abajo .

    <form id="loginForm" action="../../blog/wp-login.php" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return handleLogin();">
    			<div id="loginFormContainer">
    				<input type="hidden" name="login" id="loginField" value="login"/>
    				<input type="hidden" name="redirect" id="redirectField" value="[REDIRECT_URL/]"/>
    				<div><label for="userNameField">[LANG]userName[/LANG]:</label><br />
    				<input type="text" name="log" id="userNameField" maxlength="[USER_NAME_MAX_LENGTH/]"/></div>
    				<div><label for="passwordField">[LANG]password[/LANG]*:</label><br />
    				<input type="password" name="pwd" id="passwordField"/></div>
    				<div><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Recordar?</label></div>
    				<div><label for="channelField">[LANG]channel[/LANG]:</label><br />
    				<select name="channelName" id="channelField">[CHANNEL_OPTIONS/]</select></div>
    				<div><label for="languageSelection">[LANG]language[/LANG]:</label><br />
    				<select id="languageSelection" name="lang" onchange="ajaxChat.switchLanguage(this.value);">[LANGUAGE_OPTIONS/]</select></div>
    				<div><input type="submit" name="submit" id="loginButton" value="[LANG]login[/LANG]"/></div>
    				<div id="loginRegisteredUsers">* [LANG]registeredUsers[/LANG]</div>
    			</div>
    		</form>
    

    Y despues colocamos en el head tag el javascript que cambia el evento del de la forma, si colocas una clave la informacion suministrada se procesara en el wordpress, si no ponemos ninguna clave la forma procesara los datos con el AJAXCHAT dandole el nick que el usuario escribió si esque el nick no esta “registrado”, si lo esta le dará un error, el cual quiere decir que el nick esta registrado…
    e aqui el codigo javascript “handleLogin()”:

    	    <script type="text/javascript">
    		// <![CDATA[
    		function handleLogin() {
                    var loginForm = document.getElementById('loginForm');
                    var userNameField = document.getElementById('userNameField');
                    var passwordField = document.getElementById('passwordField');
                    var channelField = document.getElementById('channelField');
                    var redirectField = document.getElementById('redirectField');
                    if(passwordField.value.length == 0) {
                        loginForm.setAttribute('action', '[LOGIN_URL/]');
                        userNameField.setAttribute('name', 'userName');
                    } else {
                        var channelRequest = 'channelName=' + encodeURIComponent(channelField.value);
                        var regExp = /\?/;
                        if(regExp.test(redirectField.value)) {
                            redirectField.value += '&';
                        } else {
                            redirectField.value += '?';
                        }
                        redirectField.value += channelRequest;
                    }
                    return true;
                }
    			// ]]>
    	</script>
    

Espero que sea clara la explicación y que no me aya echo bolas, preguntas o algo no entendible en esta GUIA por-favor avisarme para arreglarlo.. si hay bugs en el código porfavor diganmelo.. espero sea útil pues no e visto ninguna integración con wordpress .

27 thoughts on “Integrar AjaxChat con WordPress”

  1. Amigo, te doi las mils gracias por esto. No lo hay en mas sitios, muy bien explicado, ahora voi a intentar hacerlo aun que no entiendo mucho de php. Sugiero que al principio listes los archivos que vamos a tener que editar.

    Un saludo!

  2. tu blog esta sentado diferente al mio, tendras que cambiar el path de los requires…

    <?php
    
    // Include custom libraries and initialization code here
    require_once('../wp-config.php');// cambia al el path de tu blog
    
    require_once(ABSPATH . WPINC . '/registration.php');
    $current_user = wp_get_current_user();
    $user_name = addslashes($current_user->display_name);
    $user_id=($current_user->ID);
    ?>
    

    Intenta algo asi como arriba, donde ves require_once(‘../wp-config.php’);
    Busca cual es tu path y empieza la integración..

  3. Buenas de nuevo, lo primero muchas gracias por contestar. He intetnado seguir tus pasos pero algo falla… el path del blog ya esta cambiado, y una de las dudas es si tambien tengo que cambiar el path del registration.php puesto que ese archivo yo no le tengo en el servidor. Bueno al hacer todo esto e subido el custom.php y el loggedOut.html y me tira este error,
    Parse error: syntax error, unexpected T_FUNCTION, expecting ‘{‘ in /homepages/37/d315620218/htdocs/portal/Chat/lib/custom.php on line 22

    He mirado en esa linea de codigo y esa linea contiene function initCustomRequestVars() que tu comentas, segida de la otra funcion
    function getValidLoginUserData()

    Si solo hay q editar el custom.php y el loggedout.html, me gustaria pedirte como un favor que me los pasaras editados si no es mucha molestia. Soy un torpe con php y por mas que lo intento avanzo poco. De todas maneras, tendrias que explicar donde pegar los códigos exactamente q como yo muchos se aran un poco de lio. De todas maneras ya te dije que esta bien explicado, pero mi torpeza me supera :). Si puedes enviarme eso al email, te lo agradeceria como el que mas, me hace mucha falta.

    Nuevamente mil gracias!

  4. La linea a que te refiereses:

    // Check if we have a valid registered user:

    Lo que deves hacer es borrar todo el contenido de el archivo “CustomAJAXChat.php” dejalo en blanco y pega todo el PHP clase..

  5. Vale, eso ya esta hecho y creo que tengo todo adaptado salvo un problemilla que no doi con el, y creo que es cosa de poco, te dejo un pantallazo con el error que me tira el navegador Opera, (e provado con otros y lo mismo)

    Supuestamente me dice que en la linea 1 ai algo escrito de mas, pero esq yo eso no lo veo por ningun sitio… e abierto los archivos de la carpeta templates y en esa linea esta todo correcto, no hay nada escrito ni ningun espacio delante de <?xml

    Aver si tienes idea de por que puede ser, lo demas se que ya esta todo bien configurado.

    La foto del error:
    http://www.energysoundfm.com/portal/error.jpg

    Siento no saber mas y tener que acudir tanto a ti, espero que no sea una molestia ayudarme.

    Un saludo y gracias de nuevo!

  6. en el archivo “/lib/config.php”

    busca la opcion $config[‘contentType’] =

    y pegala y salvala

    $config['contentType'] = "text/html";

    mira si el error desaparece ..

  7. Muy buenas Utan! ya lo he conseguido, mis usuarios entran con los datos de wp y el que tiene permisos para editar posts es admin en el chat, justo lo que necesitaba. Lo único que he notado que el chat va bastante mas lento que cuando estaba sin implementar en wp. A que se debe eso? a ti te pasaba lo mismo? Cuando hize la instalacion normal escribia en la caja de texto y al darle a enviar el mensaje aparecia instantaneamente, pero aora desde que doy al intro hasta que aparece tarda unos 3 segundos, y es algo incómodo. Sabes cual puede ser el problema o cual sería la solución?

    Muchisimas gracias!

  8. Es posible que ayas editado la cantidad de tiempo en-que el chat hace un httprequest, para determinar si hay texto escrito,

    en el”/js/config.js” se encuentra un opción

    // The time in ms between update calls to retrieve new chat messages:
    	timerRate: 10000,

    en este ejemplo lo tengo a 10 segundo lo cual es muy lento….
    sin embargo:
    1000 => 1 segundo,
    2000 => 2 segundos así sucesivamente, juega un poco con eso y decide que es mejor para ti..

  9. Hello there and very good job.
    I did everything you said but i have problems.
    I keep getting alot of messages:
    Deprecated: Assigning the return value of new by reference is deprecated in C:\wamp\www\wordpress\wp-settings.php on line 204

    and many more.
    Any help?

    Thanks.

  10. what version do you have currently?

    thats just a notice telling you that is deprecated coding like that, but got nothing to do with the integration at all, what you need to do is suppress those warnings in your php.ini until our friends of wordpress update to the new ways to coding..

  11. Worked perfectly for me once I turned PHP error reporting off in ajax-chat/index.php. Thanks so much for taking the time to post this, I appreciate it! (:

  12. Worked perfectly for me once I turned PHP error reporting off in ajax-chat/index.php. Thanks so much for taking the time to post this, I appreciate it! (:

    Thanks, I tried my best..

  13. Hi Utan, one question I’ve run into – how do you deal with logging users out when they’ve closed the chat window/tab without officially logging out of chat? Do you know how to log them out manually when they log out of WordPress? I’m going to try just killing their entry in ajax_chat_users, but I’m not sure that’s enough.. thanks.

  14. There isn’t a good way to do it, because not all browser supports the onunload event in javascript, thats why ajax_chat has a time out feature that as default of 2 minutes If remember well will time out the user that did not pressed the logout button..

    No if I understood the question, what you want its to when the tab is closed or windows browser is closed to destroy WordPress user session right?

    if so you could do like this

    <html>
    <head>
    <title>
    I want to destroy the user session when browser is closed..
    </title>
    </head>
    <script type="text/javascript">
    <!--
    function Sendlogout(){
    
    var xmlHttp;
    try{
    xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
    }
    catch (e){
    try{
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
    }
    catch (e){
    try{
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e){
    alert("Tu explorador no soporta AJAX.");
    return false;
    }
    }
    }
    
    fetch_unix_timestamp = function()
    {
    return parseInt(new Date().getTime().toString().substring(0, 10))
    }
    var url="logout.php";
    var timestamp = fetch_unix_timestamp();
    var nocacheurl = url+"?t="+timestamp;
    
    xmlHttp.open("GET",nocacheurl,true);
    xmlHttp.send(null);
    }
    //-->
    </script>
    <body onlunload="Sendlogout();">
    </body>
    </html>
    

    Where the function Sendlogout(), has the ajax request…
    And

    <?php
    require_once('../blog/wp-config.php');
    require_once(ABSPATH . WPINC . '/registration.php');
    // destroy wordpress session and cookies
    wp_logout();
    ?>
    

    And logout.php so with that we destroy WordPress user session..

    How to call the function is using the “body tag”

    <body onlunload="Sendlogout();">

    As I said is not cross browser friendly..

    regards.

  15. Estimado, muchas gracias por este completo tutorial. Estoy empezando la prueba, lo que quiero preguntarte es:
    si quiero instalar el chat localmente, tengo que usar localhost en el config o 127.0.0.1?
    SOlo te pido una opinion, o si lo sabes me ayudaria muchisimo.
    Muchas gracias

  16. Hola,

    Si apenas estas instalando el chat, usualmente si el servidor Mysql no esta en otro servidor entonces puedes usar “localhost” o el ip interno “127.0.0.1”.

    Y si esta en otro servidor remoto, entonces deves colocar el dominio o el IP que el servidor tiene,, Y ademas si el mysql tiene un diferente “port” entonce deves de tener la información a la mano..
    Gracias.

  17. Disculpame si pregunto una tonteria, pero como insrto esto en wordpress? Lo puedo poner como widget? O debo ponerlo como pagina? Cual seria el codigo que debo poner y en donde? Agradezco de ante mano tu respuesta….

Leave a Reply

Your email address will not be published. Required fields are marked *