Cómo conectarse al servidor nodejs
Ya hemos aprendido sobre la API WebSocket, incluidos eventos, métodos y propiedades. Detalles: WebSocket (II) - ¿API? WebSocket está controlado por eventos y admite comunicación full-duplex. A continuación lo experimentaremos a través de tres sencillos ejemplos.
Inicio simple
1. Instalar node./?
2. Instalar el módulo ws
ws: es la biblioteca WebSocket de nodejs.Se puede utilizar para crear servicios.
3. Cree un nuevo server.js en el proyecto, cree un servicio, especifique el puerto como 8181 y registre los mensajes recibidos.
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ puerto: 8181 }
wss.on('); conexión', función (ws) {
console.log('cliente conectado');
ws.on('mensaje', función (mensaje) {
console.log(mensaje);
});
});
}); client.html.
Crea una conexión WebSocket en la página. Envíe un mensaje utilizando el método de envío. send($('#message').val());
}
Página: Ver código
Después de ejecutar lo siguiente, el servidor inmediatamente Recibir información del cliente.
Simulación de acciones
El ejemplo anterior es muy simple y simplemente demuestra cómo crear un servidor WebSocket usando nodejs ws. Puede aceptar mensajes de clientes. El siguiente ejemplo muestra actualizaciones de acciones en tiempo real. El cliente solo necesita conectarse una vez, el servidor enviará continuamente nuevos datos y el cliente actualizará la interfaz de usuario después de recibir los datos. La página es la siguiente, hay cinco acciones, los botones de inicio y parada se utilizan para probar la conexión y apagar.
Lado del servidor:
1. Simular la subida y bajada de cinco acciones.
var stocks = { "AAPL": 95.0, "MSFT": 50.0, "AMZN": 300.0, "GOOG": 550.0, "YHOO": 35.0} function randomInterval(min, max) { return Math.floor( Math.random() * (max - min 1) min);
}}var stockUpdater; var randomStockUpdater = function() { for (var símbolo en acciones) { if(stocks. hasOwnProperty(symbol)) { var randomizedChange = randomInterval(-150, 150); var floatChange = randomizedChange / 100;
acciones[symbol] = floatChange;
} var randomMSTime = randomInterval(500, 2500);
stockUpdater = setTimeout(function() {
randomStockUpdater();
}, randomMSTime );
}
randomStockUpdater();
2. Comience a actualizar los datos inmediatamente después de establecer la conexión
wss.on(' conexión ', función (ws) { var sendStockUpdates = función (ws) { if (ws.readyState == 1) { var stocksObj = {} para (var i = 0; i lt; clientStocks.for (var i = 0; ; i lt; clientStocks; i ) { var símbolo = clientStocks[i];
stocksObj[symbol] = stocks[symbol]
} if (stocksObj.length ! == 0 ) { ws.send(JSON.stringify(stocksObj)); //necesita convertir el objeto en una cadena. WebSocket solo admite texto y datos binarios
console.log("Update", JSON. stringify (stocksObj));
}
}
} var clientStockUpdater = setInterval(function () {
sendStockUpdates(ws) ;
}, 1000);
ws.on('message', function (message) { var stockRequest = JSON.parse(message); // Actualizado según los datos solicitados .
console.log("Mensaje recibido", stockRequest);
clientStocks = stockRequest['stocks'];
sendStockUpdates(ws);
});
Cliente:
Establecer conexión:
var ws = new WebSocket("ws://localhost:8181" );
onopen direct solo se activa cuando la conexión es exitosa y en este momento envía al servidor las acciones que el cliente necesita solicitar.
var isClose = false; var acciones = {"AAPL": 0, "MSFT": 0, "AMZN": 0, "GOOG": 0, "YHOO": 0
}; función updataUI() {
ws.onopen = función (e) {
console.log('Conexión al servidor abierta');
isClose = false; ws.send(JSON.stringify(stock_request));
console.log("envió un mensaje");
}//actualizar UI
var changeStockEntry = function (symbol, originalValue, newValue) { var valElem = $('#' símbolo ' span');
valElem.html(newValue.toFixed(2)); (newValue lt; originalValue) {
valElem.addClass('label-danger');
valElem.removeClass('label-success');
} else if (newValue gt; originalValue) {
valElem.addClass('label-success');
valElem.removeClass('label-danger');
}
}// Procesar el mensaje recibido
ws.onmessage = function (e) { var stocksData = JSON.parse(e.data
);console.log(stocksData); for (símbolo var en stocksData) { if (stocksData.hasOwnProperty(símbolo)) {
changeStockEntry(símbolo, acciones[símbolo], stocksData[símbolo]);
acciones[símbolo] = accionesData[símbolo];
}
}
};
}
updataUI();
El efecto de la operación es el siguiente: solo necesita solicitar una vez y los datos se actualizarán continuamente. ¿No es excelente el efecto? Se requiere una conexión larga. Todo el código fuente se adjuntará al final del artículo.
(Los colores del mercado de valores de EE. UU. y del mercado de acciones A son opuestos, es decir, el rojo baja y el verde sube)
Chat en vivo
Lo anterior Por ejemplo, una vez establecida la conexión, el servidor envía datos continuamente al cliente. El siguiente ejemplo es una clase sencilla de una sala de chat. Se pueden establecer múltiples conexiones.
1. Instale el módulo node-uuid y asigne a cada conexión un número único.
2. Envío de mensajes del lado del servidor
Hay dos tipos de mensajes: notificaciones (recordatorios) y mensajes (contenido del chat). El mensaje también contiene el ID, el apodo y el contenido del mensaje.
En la sección anterior, aprendimos que readyState tiene cuatro valores, OPEN significa que se ha establecido la conexión y se pueden enviar mensajes.
función wsSend(tipo, client_uuid, apodo, mensaje) { for (var i = 0; i lt; clientes.longitud; i) { var clientSocket = clientes[i].ws; if (clientSocket. readyState === WebSocket.OPEN) {
clientSocket.send(JSON.stringify({ "type": tipo, "id".client_uuid, "nickname": apodo, "message": mensaje
});
}
}
}
3. Procesamiento de conexiones del lado del servidor
Cada vez que se agrega una nueva conexión, el usuario anónimo se unirá enviando un mensaje. Luego se actualizará el apodo del cliente. Otra información se tratará como información de chat.
wss.on('conexión', función(ws) { var client_uuid = uuid.v4(); var apodo = "AnonymousUser" clientIndex;
clientIndex = 1;
p>
clients.push({ "id": client_uuid, "ws": ws, "nickname": apodo });
console.log('cliente [s ] conectado', client_uuid ); var connect_ message = apodo "se ha conectado"; wsSend("notificación", client_uuid, apodo, connect_message);
console.log('cliente [s] conectado', client_uuid);
ws.on('mensaje', función(mensaje) { if (message.indexOf('/nick') === 0) { var apodo_array = mensaje.split( ' '); if (nickname_array.length gt; = 2) { var old_nickname = apodo;
nickname = apodo_array[1]; var apodo_message = "El apodo del cliente " old_ " cambió a " apodo; client_uuid, apodo, apodo_mensaje );
}
} else {
wsSend(" mensaje", client_uuid, apodo, mensaje);
}
});
Manejar el cierre de la conexión:
var closeSocket = function(customMessage) { for (var i = 0; i lt; clientes .length; i ) { if (clientes[i].id == client_uuid) { var desconect_message; if (customMessage) {
disconnect_message = customMessage;
} else {
desconectar_message = apodo "se ha desconectado";
} wsSend("notificación", client_uuid, apodo, desconectar_message);
clients.splice(i, 1);
}
}
}
}
};
ws. on('cerrar', función () {
closeSocket();
});
4. Cliente
Cuando no se inicia, la página se ve así, el botón de cambio se usa para cambiar el nombre de Nick.
Ver código
js:
//Establecer conexión
var ws = new WebSocket("ws://localhost:8181 "); var apodo = "";
ws.onopen = function (e) {
console.log('Conexión al servidor abierta');
}//Mostrar
función appendLog(tipo, apodo, mensaje) { if (tipo de mensaje == "indefinido") return; var mensajes = document.getElementById('mensajes'); .createElement("li"); var preface_label; if (tipo === 'notificación') {
preface_label = "lt; span class=\"label label-info\"gt; *lt; /spangt;"
} else if (type == 'nick_ update') {
preface_label = "lt; span class=\"label-warning\"gt;* lt ;/spangt;"
} else {
preface_label = "lt;span class=\"label-success\"gt;"
apodo "lt ;/spangt;";
} var message_text = "lt;h2gt;" preface_label "amp;nbsp; amp;nbsp;.amp;nbsp;"
mensaje " lt; /h2gt;";
messageElem.innerHTML = message_text;
mensajes.appendChild(messageElem);
} // Recibir procesamiento de mensajes
}
ws.onmessage = function (e) { var data = JSON.parse(e.data);
apodo = data.nickname;
appendLog(data.type, data.nickname, data.message);
console.log("ID: [s] = s", data.id, data.message);
p>}
ws.onclose = function (e) {
appendLog("Conexión cerrada");
console.log(" Conexión cerrado");
}//Enviar mensaje
function sendMessage() { var messageField = document.g
etElementById('mensaje'); if (ws.readyState === WebSocket.OPEN) {
ws.send(messageField.value);
}
messageField.value = '';
messageField.focus();
}//cambiar el nombre
function changName() { var nombre = $ ("#nombre").val(); if (ws. readyState === WebSocket.OPEN) {
ws.send("/nick " nombre);
}
}
Resultados de la ejecución:
Después de cerrar la página, la conexión se interrumpe inmediatamente.
Esta experiencia de respuesta en tiempo real no podría ser mejor, el código es más simple, la experiencia de front-end es mejor, el cliente no tiene que seguir enviando solicitudes y el servidor no tiene que esperar. para las encuestas.
Resumen: el ejemplo de código anterior es fácil de entender. A continuación, aprenda el protocolo WebSocket.