Integrar AjaxChat con WordPress

Escrita por , 26 October 2010

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 .

Categorias : Guias para la Web,php y algo mas,Un poco de html Etiquetas :

Trackbacks & Pingbacks
Comentarios
14 April 2011

Asi como lo descargaste, lo subes a tu web por ejemplo:

http://tusitio.com/chat

donde chat es el archivo que descomprimiste y subiste a tu sitio web…

una ves subido y conectado a WordPress abres tu navegador a http://tusitio.com/chat
y identificado en WordPress ya podrás entrar como usuario.

gracias..

Echo by UTAN
3 January 2013

Muy interesante! Quisiera saber si aun sirve y que versión de ajaxchat usaste (standalone, phpbb, etc..)

Saludos!

Echo by Frank
3 January 2013

Hola,

Es estandalone, ajax_chat-0.8.3 la cual creo que no es la mas actual en estos momentos, pues escuche que se a parchado por un problema XSS que tenia..

Echo by UTAN
9 October 2013

not working for 0.8.6.
You have some minor bugs in this code: not paste until 3207 but 3215, and createGuestUserID is wrong! Must be createGuestUserName!
I dont know why, but it is working then.
And you have a big logout/re-login problem with guests and no auto-login for guests.
will you correct this errors you do you give up this project?
i wait for your answer one week, otherwise i guess you are about to close this project.
thanks!

Echo by ichbins
9 October 2013

@ ichbins, it’s been long since I checked Ajaxchat, I am no longer updating this post and it’s going to stay only for history..
Thanks for you kind reply.

Echo by UTAN
22 May 2014

yo queria saber si se podia instalar en un blogger y si me podian ayudar porque si me interesa mucho tener este chat en mi blogger

Echo by kamecorp
Deja tu comentario

(requerido)

(requerido)