JQuery WebSocket
Con Jquery
podemos usar WebSockets para interactuar con el servidor usando unas pocas líneas
de código.
Para nuestro
ejemplo vamos a usar un WebSocket gratuito que podemos obtener en este link http://www.websocket.org/echo.html
Para iniciar lo que tenemos que hacer es crear
una página nueva de html. En esta pagina vamos a desarrollar nuestro código.
Con la pagina de html lista el siguiente paso
es agregar la referencia a la librería de query. Podemos usar esta sin ningún problema
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
En el head vamos
a agregar la referencia de jquery. Que nos permitirá hacer la conexión al
websocket.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="message" />
<button onclick="sendMessage()">Send Message</button>
<script>
var socket = new WebSocket("ws://echo.websocket.org");//we call the websocket service
$(document).ready(function () {
//this function will open the websocket
socket.onopen = function () {
console.log("Server connected");
}
socket.onmessage = function (messageFromServer) {
console.log(messageFromServer.data);//this will get the server message everytime it replays back.
}
});
function sendMessage() {
socket.send($("#message").val());//we get the input message and send it the server
}
</script>
</body>
</html>
Ahora vamos a
crear una sección de script para agregar un document ready en el cual se va a
inicializar la conexión del websocket. El cual creamos en la línea antes del
document ready. El método onopen nos mostrara en el momento que estemos conectados.
Lo que tenemos
que hacer ahora es crear una función para esperar los mensajes del servidor. Para
esto usamos la función onmessage. Con esto podemos leer los resultados del
servidor.
Finalmente, vamos
a crear una función para poder enviar mensajes al servidor. Usando la función send
del objeto socket que construimos al inicio. De esta manera tenemos listo nuestra
pequeña aplicación.
ejemplo
ejemplo
Etiquetas: html, Javascript, jquery, websocket
entrada de JC @ noviembre 07, 2019
0 comentarios
0 comentarios:
Publicar un comentario
Suscribirse a Enviar comentarios [Atom]
<< Inicio