ios連接websocketjs（ios連接wifi不彈出登錄頁面）

本文目錄一覽：

• 1、IOS系統蘋果手機 WebSocket無法連接的問題
• 2、Js WebSocket
• 3、iOS使用Charles代理抓包WebSocket連接
• 4、怎樣在iOS中使用websocket協議

IOS系統蘋果手機 WebSocket無法連接的問題

Vue前端使用了WebSocket和伺服器進行交互，在PC和ANDROID上都正常使用，但是在蘋果手機上連接失敗，也沒什麼報錯，經過抓包發現了問題。

這是正常瀏覽器訪問的協議：

下面是IOS手機訪問時抓到的協議

發現了這2個地方有區別，然後百度了一下發現存在 The extension [x-webkit-deflate-frame] is not supported 的問題

按照上面的辦法，在伺服器端攔截器加上：

if(request.getHeaders().containsKey(“Sec-WebSocket-Extensions”)){

request.getHeaders().set(“Sec-WebSocket-Extensions”, “permessage-deflate”);

}

就可解決！

Js WebSocket

html

head

script type=”text/javascript”

var ws = new WebSocket(“ws://localhost:7272”);

//申請一個WebSocket對象，參數是服務端地址，同http協議使用http://開頭一樣，WebSocket協議的url使用ws://開頭，另外安全的WebSocket協議使用wss://開頭

ws.onopen = function(){

//當WebSocket創建成功時，觸發onopen事件

  console.log(“open”);

ws.send(“hello”); //將消息發送到服務端

}

ws.onmessage = function(e){

//當客戶端收到服務端發來的消息時，觸發onmessage事件，參數e.data包含server傳遞過來的數據

    var data = JSON.parse(e.data);

  switch(data[‘type’]){

            // 服務端ping客戶端

            case ‘ping’:

                ws.send(‘{“type”:”pong”}’);

console.log(“ping: “+e.data);

                break;;

            // 登錄 更新用戶列表

            case ‘login’:

    console.log(“login: “+e.data);

                //{“type”:”login”,”client_id”:xxx,”client_name”:”xxx”,”client_list”:”[…]”,”time”:”xxx”}

                /*say(data[‘client_id’], data[‘client_name’],  data[‘client_name’]+’ 加入了聊天室’, data[‘time’]);

                if(data[‘client_list’])

                {

                    client_list = data[‘client_list’];

                }

                else

                {

                    client_list[data[‘client_id’]] = data[‘client_name’];

                }

                flush_client_list();

                console.log(data[‘client_name’]+”登錄成功”);*/

                break;

            // 發言

            case ‘say’:

      console.log(“say: “+e.data);

                //{“type”:”say”,”from_client_id”:xxx,”to_client_id”:”all/client_id”,”content”:”xxx”,”time”:”xxx”}

                //say(data[‘from_client_id’], data[‘from_client_name’], data[‘content’], data[‘time’]);

                break;

            // 用戶退出 更新用戶列表

            case ‘logout’:

    console.log(“logout: “+e.data);

                //{“type”:”logout”,”client_id”:xxx,”time”:”xxx”}

              // say(data[‘from_client_id’], data[‘from_client_name’], data[‘from_client_name’]+’ 退出了’, data[‘time’]);

                //delete client_list[data[‘from_client_id’]];

              //  flush_client_list();

        }

}

ws.onclose = function(e){

//當客戶端收到服務端發送的關閉連接請求時，觸發onclose事件

console.log(“close”);

}

ws.onerror = function(e){

//如果出現連接、處理、接收、發送數據失敗的時候觸發onerror事件

console.log(error);

}

function login()

{

  console.log(“login:111”);

    var login_data = ‘{“type”:”login”,”client_name”:”zyx”,”room_id”:”1″}’;

    console.log(“websocket握手成功，發送登錄數據:”+login_data);

    ws.send(login_data);

}

function send()

{

  console.log(“send:111”);

    ws.send(‘{“type”:”say”,”to_client_id”:”all”,”to_client_name”:”222″,”content”:”txt”}’);

}

function send2()

{

  console.log(“send:111”);

    ws.send(‘{“type”:”say”,”to_client_id”:”7f00000108fc00000011″,”to_client_name”:”222″,”content”:”txt”}’);

}

/script

/head

body

div onclick=”login()” style=”width:100px;height:80px;”

  登錄

/div

div onclick=”send()”  style=”width:100px;height:80px;”

  發送

/div

div onclick=”send2()”  style=”width:100px;height:80px;”

  發送2

/div

/body

/html

iOS使用Charles代理抓包WebSocket連接

代理軟體：Shadowrocket（白嫖蘋果賬號： ）

1、手機上安裝Shadowrocket

2、掌握了Charles對HTTPS抓包的設置

1、Charles勾選如下設置

2、打開Shadowrocket添加Socks5類型的節點，地址填寫代理ip，埠填寫上一步中SOCKS Proxy埠，然後選擇全局代理模式進行連接

3、可以看到Charles中已經抓到wss的連接了

印象筆記 ：

備註：測試過程中發現有很多主流app還是抓不到，這個有待研究，但是上圖印象筆記、貝殼找房是可以抓到的，大家可自行驗證其他app

怎樣在iOS中使用websocket協議

做一個列印指定頁的功能，輸入起始頁終止頁，然後從後台拿到對應的數據，跳到另一個頁面(此頁面承載符合條件的內容)此頁面中提供onload事件，直接執行列印哪個功能;