Creando un messenger en mi sitio web parte 3
Hemos llegado a la parte final del messenger!!!
Bien...seguimos trabajando con el proyecto anterior recuerden. Veamos la página Default.html . Localizen la función singInCompleted y agreguen esta linea de código a continuación de _contactCollection = _user.get_contacts.
_user.get_conversations().add_propertyChanged(Delegate.create(null, conversation_collectionChanged));
esto lo que hace es crear y delegar de conversation_collectionChanged , el cual recarda la conversación cada ves que tiene cambios.
Luego de setPersonalMessage coloquen el siguiente código. La función crea una nueva conversación con el usuario elegido.
function createConv(index) {
var newConv = _user.get_conversations().create(_addressList[index]);
var convId = _user.get_conversations().get_count();
switchConv(newConv.convId);
}
debajo de displayContacts reemplazen este block de código:
if (dispName !== '') {
statusLine = dispName + ' [' + status + ']';
}
else {
statusLine = currAddress + ' [' + status + ']';
} statusLine = dispName + ' [' + status + ']';
por el siquiente:
if (dispName !== '') {
statusLine = '<a href=\'BLOCKED SCRIPTcreateConv(' + index + ')\'>'
+ dispName + ' [' + status + ']</a>';
}
else {
statusLine = '<a href=\'BLOCKED SCRIPTcreateConv(' + index + ')\'>'
+ currAddress + ' [' + status + ']</a>';
}
Este agrega un link para cada conversacion de cada contacto. Luego de createConv coloquen este código.
/* Coloca el mensaje en la conversacion. */
function sendMsg() {
var txtMessage = document.getElementById('txtMessage');
var messageText = txtMessage.value;
var message = new Microsoft.Live.Messenger.TextMessage(messageText, null);
if (_user) {
_conv.sendMessage(message, null);
}
displayMsg(message);
txtMessage.value = '';
txtMessage.focus();
}
/* Se llama cuando un nuevo mensaje es recibido. */
function recvMsg(sender, e) {
var message = e.get_message();
displayMsg(message);
document.getElementById('msgLastRecv').innerText = 'Last message at: '
+ _conv.get_history().get_lastReceived().toString();
}
/* Muestra el texto de un mensaje nuevo recibido. */
function displayMsg(message) {
var elMsg = message.createTextElement();
var txtConv = document.getElementById('txtConv');
var userName = "";
if (message.get_sender().get_presence().get_displayName() != null)
userName = message.get_sender().get_presence().get_displayName();
else
userName = message.get_sender().get_address();
txtConv.appendChild(document.createTextNode(userName + ' says: '));
txtConv.appendChild(elMsg);
txtConv.appendChild(document.createElement('br'));
}
Estas funciones manejan las acciones de enviar, recibir escribir mensajes. A continuación agregamos la función que refrezca la lista de conversaciones activas.
function displayConversations() {
convArray = new Array();
var sb = new StringBuilder('<p><b>Active Conversations:
(click a conversation to resume):</b></p>');
var item = 0;
var enum1 = _user.get_conversations().getEnumerator();
while (enum1.moveNext()) {
var c = enum1.get_current();
convArray.push(c + ":" + item);
if (c.get_closed())
continue;
sb.append(convLink(c, item));
sb.append("<hr />");
item++;
}
document.getElementById('divConversations').innerHTML = sb.toString();
}function convLink(c, item)
{
var roster = c.get_roster();
var enum1 = roster.getEnumerator();
var names = new Array();
while (enum1.moveNext())
{
var dispName = enum1.get_current().get_presence().get_displayName();
var dispEmail = enum1.get_current().get_address();
if (dispName !== '') {
names.push(dispName);
} else {
names.push(dispEmail);
}
}
var sb = new StringBuilder();
sb.append('<a href=\"BLOCKED SCRIPTswitchConv(' + item + ')\">');
if (c == _conv)
sb.append('<b>');
sb.append(names.join(', '));
if (c == _conv)
sb.append('</b>');
sb.append('</a>');
sb.append(' ');
sb.append('<a href=\"BLOCKED SCRIPTcloseConv(' + item + ')\">');
sb.append('close</a>');
return sb.toString();
}
General los links de conversaciones que el usuario puede manejar para cerrar y abrir conversaciones. A continuación la función que cambia las conversaciones a la elegida por el usuario:
function switchConv(id)
{
var c = _user.get_conversations().get_item(id);
if (c)
{
if (_conv) {
_conv.remove_messageReceived(_convSink);
}
_convSink = Delegate.create(null, recvMsg);
_conv = c;
_conv.add_messageReceived(_convSink);
removeChildrenFromNode('txtConv');
/* Display all messages from the conversation history. */
var hist = c.get_history();
var histEnum = hist.getEnumerator();
while (histEnum.moveNext()) {
displayMsg(histEnum.get_current());
}
document.getElementById('btnSend').disabled = false;
}
displayConversations();
txtMessage.focus();
}/* Cierra la conversacion actual. */
function closeConv(id) {
var c = _user.get_conversations().get_item(id);
convArray.splice(id, 1);
c.close();
if (c == _conv)
{
removeChildrenFromNode('txtConv');
}
displayConversations();
if(_user.get_conversations().get_count() == 0)
document.getElementById('btnSend').disabled = true;
}
/* Limpia los hijos del nodo especificado. */
function removeChildrenFromNode(id){
var node = document.getElementById(id);
if(node == undefined || node == null)
{
return;
}
var len = node.childNodes.length;
while (node.hasChildNodes())
{
node.removeChild(node.firstChild);
}
}
Finalmente agregamos las declaraciones que vamos a usar.
_user = null;
_signin = null;
_addressList = null;
_contactCollection = null;
_conv = null;
_convSink = null;
convArray = null;
Y finalmente el cuerpo donde cargaremos todo :
<body onload="scriptMain()">
<div id="msgr">
<table>
<tr>
<td>
<div id="signinframe">
</div>
</td>
</tr>
<tr>
<td>
<div id="userInfo">
</div>
</td>
</tr>
<tr>
<td>
<div id="setUserStatus">
<span><b>Cambiar mi status:</b></span>
<select id="selectStatus" onchange="selectStatusChanged()">
<option>No conectado</option>
<option>Ausente</option>
<option>Volveré en seguida</option>
<option>Ocupado</option>
<option>No disponible</option>
<option>Al telefono</option>
<option>Conectado</option>
<option>Almorzando</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div id="setPersonalMessage">
<span><b>Mensaje personal: </b></span>
<input id="personalMessage" type="text" />
<input onclick="setPersonalMessage()"
id="btnSetPersonalMessage"
type="button" value="Set" />
</div>
</td>
</tr>
<tr>
<td>
<div id="sendMessage">
<hr />
<span><b>Enviar mensaje:</b></span>
<p id="contactLabel">
</p>
<p id="msgLastRecv">
</p>
<div id="txtConv">
</div>
<br />
<input id="txtMessage" type="text" /><br />
<input onclick="sendMsg()" id="btnSend" type="submit"
value="Send Message" disabled="disabled" />
</div>
</td>
</tr>
<tr>
<td>
<div id="divConversations">
</div>
</td>
</tr>
<tr>
<td>
<div id="divContacts">
</div>
</td>
</tr>
</table>
</div>
<div id="introPage">
<h2>
Windows Live Messenger </h2>
<h4>
Modo de uso:</h4>
<ol>
<li>Ingrese con su Windows Live ID.</li>
<li>Seleccione un contacto de la <b>Lista de contacto</b>.</li>
<li>En la <b>Conversacion Activa</b> haga click en el nombre del contacto para comenzar
a chatear con una o mas ventanas.</li>
</ol>
</div>
</body>
Bien el código para bajar BAJAR AQUÍ, un screenshot y el link de la demo :) disfruten! Para la próxima uno hecho en asp.net y con silverlight :p.(primero debia saber como esta funcionando todo)
