Previous Contents

E   WebSockets

Le protocole WebSocket permet une communication bi-directionnelle entre un navigateur et une application distante.

E.1   Bibliothèque JQuery

Vous pouvez trouver la bibliothèque Web 2.0 jquery.js sur le site http://jquery.com/. Cette bibliothèque permet de lancer des requêtes HTTP asynchrones mais aussi de faciliter la programmation JavaScript.

E.2   Exemple de serveur WebSocket

L'exemple ci-dessous est réalisé avec une bibliothèque C de WebSocket dont le site est http://libwebsockets.org. Pour en disposer sur une machine Debian, installez le paquetage libwebsockets-dev. Lors de la compilation du programme n'oubliez pas l'option -lwebsockets. 
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <libwebsockets.h>

#define MAX_FRAME_SIZE  1024
#define WAIT_DELAY      50

static int callback_http(
  struct libwebsocket_context *this,
  struct libwebsocket *wsi,enum libwebsocket_callback_reasons reason,
  void *user,void *in,size_t len)
{
return 0;
}

static int callback_my(
  struct libwebsocket_context * this,
  struct libwebsocket *wsi,enum libwebsocket_callback_reasons reason,
  void *user,void *in,size_t len)
{
static char *message=NULL;
static int msize=0;
switch(reason){
  case LWS_CALLBACK_ESTABLISHED:
    printf("connection established\n");
    message=NULL;
                // Declenchement d'un prochain envoi au navigateur
    libwebsocket_callback_on_writable(this,wsi);
    break;
  case LWS_CALLBACK_RECEIVE:
                // Ici sont traites les messages envoyes par le navigateur
    printf("received data: %s\n",(char *)in);
    message=malloc(len+LWS_SEND_BUFFER_PRE_PADDING+LWS_SEND_BUFFER_POST_PADDING);
    if(message==NULL){ perror("callback_my.malloc"); exit(EXIT_FAILURE); }
    memcpy(message+LWS_SEND_BUFFER_PRE_PADDING,in,len);
                // Declenchement d'un prochain envoi au navigateur
    msize=len;
    libwebsocket_callback_on_writable(this,wsi);
    break;
  case LWS_CALLBACK_SERVER_WRITEABLE:
                // Ici sont envoyes les messages au navigateur
    if(message!=NULL){
      char *out=message+LWS_SEND_BUFFER_PRE_PADDING;
      libwebsocket_write(wsi,(unsigned char *)out,msize,LWS_WRITE_TEXT);
      free(message);
      message=NULL;
      }
    break;
  default:
    break;
  }
return 0;
}

static struct libwebsocket_protocols protocols[] = {
  {
    "http-only",   // name
    callback_http, // callback
    0,             // data size
    0              // maximum frame size
  },
  {"myprotocol",callback_my,0,MAX_FRAME_SIZE},
  {NULL,NULL,0,0}
  };

int main(void) {
int port=9000;
struct lws_context_creation_info info;
memset(&info,0,sizeof info);
info.port=port;
info.protocols=protocols;
info.gid=-1;
info.uid=-1;
struct libwebsocket_context *context=libwebsocket_create_context(&info);
if(context==NULL){
  fprintf(stderr, "libwebsocket init failed\n");
  return -1;
  }
printf("starting server...\n");
while(1){
  libwebsocket_service(context,WAIT_DELAY);
  }
libwebsocket_context_destroy(context);
return 0;
}

E.3   Exemple d'utilisation d'un serveur WebSocket

La page HTML ci-dessous se connecte sur le serveur WebSocket présenté ci-avant. Les chaînes tapés dans le champ texte sont envoyés au serveur WebSocket puis retournées par le serveur au navigateur Web et affichées dans une balise div. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <script type="text/javascript">
window.WebSocket=(window.WebSocket||window.MozWebSocket);

var websocket=new WebSocket('ws://127.0.0.1:9000','myprotocol');

websocket.onopen=function(){ $('h1').css('color','green'); };

websocket.onerror=function(){ $('h1').css('color','red'); };

websocket.onmessage=function(message){
console.log(message.data);
$('#messages').append($('<p>',{ text: message.data }));
};

function sendMessage(){
websocket.send($('#message').val());
$('#message').val('');
}
    </script>
  </head>
  <body>
    <h1>WebSockets test</h1>
    <input type="text" id="message"/>
    <button onclick="sendMessage();">Send</button>
    <div id="messages"></div>
  </body>
</html>
Previous Contents