web-dev-qa-db-fra.com

WebSockets sur iOS

J'ai lu que WebSockets fonctionne sur iOS 4.2 et supérieur. Et je peux vérifier qu’il existe bien un objet WebSocket. Mais je ne trouve pas un seul exemple WebSocket qui fonctionne sur le téléphone. 

Par exemple, http://yaws.hyber.org/websockets_example.yaws plantera l’application Mobile Safari. Quelqu'un at-il des WebSockets fonctionnant avec succès sur le téléphone?

iphoneiosipadwebsocket
17
probablyCorey

J'ai peut-être trouvé la solution. Mobile Safari ne se bloque avec les websockets que lorsque vous avez configuré un proxy via wifi.

11
probablyCorey

Il est pris en charge, mais gardez à l'esprit en ce qui concerne la norme implémentée par le navigateur iOS Safari, ce n'est pas RFC 6455, mais HyBi-00/Hixie-76.

Vous pouvez également tester en utilisant ce navigateur: http://websocketstest.com/

Vérifiez également cet article qui contient la plupart des informations sur les versions: https://stackoverflow.com/a/2700609/1312722

OBS!, c'est une vieille réponse. J'ai vérifié via la page Web mentionnée dans ce message associée à browserstack.com:

  • iphone 4s
  • iPhone 5
  • iphone 5s
  • iphone 6
  • iPhone6 ​​Plus
  • iPhone6S
  • iPhone6S Plus

Tous en utilisant RFC 6455

6
moka

J'ai eu un problème similaire et j'ai même regardé ce post pour trouver une solution. Pour moi, cela n'avait rien à voir avec une connexion wifi. Cela semble être un bogue dans l'implémentation iOS de websockets (même jusqu'à la version 5.1 actuelle). En démarrant un tas de débogages XCode, j'ai découvert que cela avait quelque chose à voir avec la gestion de la mémoire, car j'obtiendrais quelque chose comme "message envoyé à une instance désallouée". Très probablement, il y avait un objet dont le nombre de références n'était pas correct et qui avait été nettoyé beaucoup trop tôt.

Ce blog contient de nombreuses informations utiles sur les symptômes du problème et sur la façon de le déboguer, mais ne propose pas de solution de contournement: http://dalelane.co.uk/blog/?p=1652

Finalement, j'ai trouvé cette solution de contournement et mon application a presque complètement cessé de planter.

me = this // strange javascript convention
this.socket = new WebSocket(url);
// put onmessage function in setTimeout to get around ios websocket crash
this.socket.onmessage = function(evt) { setTimeout(function() {me.onMessageHandler(evt);}, 0); };
3
Matthew Levine

Je les ai fait travailler sur Chrome et Safari, iPhone et iPad (et autres appareils mobiles aussi, mais je suppose que cela ne vous dérange pas). Voici le code Javascript que j'utilise:

<script language="javascript" type="text/javascript">

    var wsUri = document.URL.replace("http", "ws");
    var output;
    var websocket;


    function init()
    {
        output = document.getElementById("output");
        wsConnect();
    }

    function wsConnect()
    {
        console.log("Trying connection to " + wsUri);
        try
        {
            output = document.getElementById("output");
            websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt)
            {
                    onOpen(evt)
            };
            websocket.onclose = function(evt)
            {
                    onClose(evt)
            };
            websocket.onmessage = function(evt)
            {
                    onMessage(evt)
            };
            websocket.onerror = function(evt)
            {
                    onError(evt)
            };
        }
        catch (e)
        {
            console.log("Exception " + e.toString());
        }
    }


    function onOpen(evt)
    {
        alert("Connected to " + wsUri);
    }

    function onClose(evt)
    {
        alert("Disconnected");
    }

    function onMessage(evt)
    {
        alert('Received message : ' + evt.data);
    }

    function onError(evt)
    {
        alert("Error : " + evt.toString());
    }

    function doSend(message)
    {
        websocket.send(message);
    }

    window.addEventListener("load", init, false);

L'envoi de données d'un client à un serveur est terminé en appelant la fonction doSend (). Recevoir des données du serveur fonctionne aussi, je l'ai testé à partir d'un serveur C++ personnalisé.

2
Mickaël C. Guimarães

Je déboguais un problème similaire et découvris que si vous utilisiez https pour récupérer la page Web, iOS vous intercepterait si vous utilisiez le protocole "ws:" pour passer dans WebSocket. Si vous utilisez "wss:" tout fonctionnera et il n'y aura pas de piège.

1
Justin Bullard

Voici un échantillon de travail

Client de socket Web

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">

    var websocket;

function OpenWebSocket()
{

   try {
       websocket = new WebSocket(document.getElementById("wsURL").value);
       websocket.onopen = function(evt) { onOpen(evt) };
       websocket.onclose = function(evt) { onClose(evt) };
       websocket.onmessage = function(evt) { onMessage(evt) };
       websocket.onerror = function(evt) { onError(evt) };
   }
   catch(err) {
       writeToScreen(err.message);
   }
}

function CloseWebSocket()
{
     websocket.close();
}

function FindWebSocketStatus()
{
     try {
         if (websocket.readyState == 1){
          writeToScreen("Websocket connection is in open state")
         }
         else if (websocket.readyState == 0){
             writeToScreen("Websocket connection is in connecting state")
         }
         else{
          writeToScreen("Websocket connection is in close state")
         }
     }
     catch(err) {
         writeToScreen(err.message);
     }
}

function FindWebSocketBufferedAmount(){
    try {
            writeToScreen(websocket.bufferedAmount)
    }
    catch(err) {
        writeToScreen(err.message);
    }
}

function SendMessageThroughSocket(){
    doSend(document.getElementById("wsMessage").value);
}

function onOpen(evt)
{
    writeToScreen("Socket Connection Opened");
}

function onClose(evt)
{
    writeToScreen("Socket Connection Closed");
}

function onMessage(evt)
{
    writeToScreen('<span style="color: blue;">SERVER RESPONSE: ' + evt.data+'</span>');
}

function onError(evt)
{
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}

function doSend(message)
{
    try{
    writeToScreen("CLIENT SENT: " + message);
    websocket.send(message);
    }
    catch(err) {
        writeToScreen(err.message);
    }
}

function writeToScreen(message)
{
    var output = document.getElementById("output");
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-Word";
    pre.innerHTML = message;
    output.appendChild(pre);
}
</script>
</title>
</head>
<body>
    <table>
        <tr>
            <td>
                WebSocket URL
            </td>
            <td>
                <input type="text" id="wsURL" value="ws://echo.websocket.org/"/>
            </td>
        </tr>
        <tr>
            <td>
                WebSocket Message
            </td>
            <td>
                <input type="text" id="wsMessage" value="Hi"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:left;">
                <input type="button" value="Open Socket Connection" onclick="OpenWebSocket();"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:left;">
                 <input type="button" value="Send Message" onclick="SendMessageThroughSocket();"/>
            </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:left;">
              <input type="button" value="Close Socket Connection" onclick="CloseWebSocket();"/>
          </td>
         </tr>
        <tr>
            <td colspan="2" style="text-align:left;">
                <input type="button" value="Find Socket Status" onclick="FindWebSocketStatus();"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:left;">
                <input type="button" value="Find Socket Buffered Amount" onclick="FindWebSocketBufferedAmount();"/>
            </td>
        </tr>
    </table>

<div id="output"></div>
</body>
</html>

Serveur Web Socket

Créer votre propre serveur de socket est également simple Il suffit d'installer le fichier Node.js et le fichier socket.io, puis d'installer Web socket via npm

#!/usr/bin/env node
var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
                               console.log((new Date()) + ' Received request for ' + request.url);
                               response.writeHead(404);
                               response.end();
                               });
server.listen(8888, function() {
              console.log((new Date()) + ' Server is listening on port 8888');
              });

wsServer = new WebSocketServer({
                               httpServer: server,
                               // You should not use autoAcceptConnections for production
                               // applications, as it defeats all standard cross-Origin protection
                               // facilities built into the protocol and the browser.  You should
                               // *always* verify the connection's Origin and decide whether or not
                               // to accept it.
                               autoAcceptConnections: false
                               });

function originIsAllowed(Origin) {
    // put logic here to detect whether the specified Origin is allowed.
    return true;
}

wsServer.on('request', function(request) {
            if (!originIsAllowed(request.Origin)) {
            // Make sure we only accept requests from an allowed Origin
            request.reject();
            console.log((new Date()) + ' Connection from Origin ' + request.Origin + ' rejected.');
            return;
            }

            var connection = request.accept();
            console.log((new Date()) + ' Connection accepted.');
            connection.on('message', function(message) {
                          if (message.type === 'utf8') {
                          console.log('Received Message: ' + message.utf8Data);
                          connection.sendUTF('Message received at server:'+message.utf8Data);
                          }
                          else if (message.type === 'binary') {
                          console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
                          connection.sendBytes(message.binaryData);
                          }
                          });
            connection.on('close', function(reasonCode, description) {
                          console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
                          });
            });

 NodeJS folder in Finder

enregistrez le fichier ci-dessus en tant que .js et exécutez-le comme suit: node filename.js à partir du terminal ou de la commande Invite

 NodeJS

Le fichier ci-dessus est comme si nous avions créé un serveur http en utilisant noeud puis nous passions l'instance de serveur http créée à Websocketserver, puis à l'instance Socket.iO.

1
Durai Amuthan.H