iOS上のWebSocket
WebSocketがiOS 4.2以降で動作することを読みました。そして、実際にWebSocketオブジェクトがあることを確認できます。しかし、電話で機能するWebSocketのサンプルが1つも見つかりません。
たとえば http://yaws.hyber.org/websockets_example.yaws はMobile Safariアプリをクラッシュさせます。誰かが電話でWebSocketsを正常に動作させていますか？
私は解決策を見つけたかもしれません。モバイルSafariは、wifi経由でプロキシを設定した場合にのみ、WebSocketでクラッシュします。
サポートされていますが、iOS Safariブラウザが実装する標準に関しては、RFC 6455ではなく、HyBi-00/Hixie-76であることに注意してください。
このブラウザを使用してテストすることもできます： http://websocketstest.com/
同様に、バージョンに関するほとんどの情報があるこの素晴らしい投稿をチェックしてください： https://stackoverflow.com/a/2700609/1312722
OBS！、これは古い答えです。私はbrowserpost.comと組み合わせてこの投稿で言及されているウェブページをチェックしました：
- アイフォーン4エス
- iPhone 5
- iPhone5S
- iphone 6
- iPhone6 Plus
- iPhone6S
- iPhone6S Plus
すべてRFC 6455を使用
私にも同様の問題があり、この投稿を調べて修正方法を見つけました。私にとって、それは無線LAN接続であることとは何の関係もありませんでした。これは、WebSocketのiOS実装のバグのようです（現在のバージョン5.1まで）。一連のXCodeのデバッグをオンにすると、「割り当て解除されたインスタンスに送信されたメッセージ」の行に沿って何かを取得するため、メモリ管理と関係があることがわかりました。おそらく、正しい参照カウントを持たず、早すぎる方法でクリーンアップされたオブジェクトがありました。
このブログには、問題の症状とそのデバッグ方法に関する多くの優れた情報がありますが、回避策はありません： http://dalelane.co.uk/blog/?p=1652 =
でも結局、私はこの回避策を見つけて、私のアプリはほぼ完全にクラッシュしなくなりました。
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); };
私はChromeとSafari、iPhone、iPad（および他のモバイルデバイスも同様ですが、それらについては気にしないと思います）で作業しています。ここで私が使用しているJavaScriptコードは次のとおりです。
<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);
クライアントからサーバーへのデータの送信は、doSend（）関数を呼び出して行われます。サーバーからデータを受信することもできますが、カスタムC++サーバーからテストしました。
私は同様の問題をデバッグしていて、httpsを使用してWebページを取得した場合、「ws：」プロトコルをWebSocketに渡すとiOSがトラップすることがわかりました。 「wss：」を使用すると、すべてが機能し、トラップは発生しません。
これが実際のサンプルです
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>
Webソケットサーバー
独自のソケットサーバーの作成も簡単ですNode.jsとsocket.ioをインストールしてから、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.');
});
});
上記のファイルを.jsとして保存し、ターミナルまたはコマンドプロンプトからnode filename.jsのように実行します
上記のファイルは、最初にノードを使用してhttpサーバーを作成し、次に作成したhttpサーバーインスタンスをWebsocketserverに渡し、次にSocket.iOインスタンスに渡しています。