js發起websocket,js發起遠程網路請求,並且獲取返回結果

本文目錄一覽：

• 1、前台不用Socket.io.js如何發起webSocket請求連接？
• 2、Js WebSocket
• 3、WebSocket的簡單實現
• 4、在html頁面中，用js調取websocket，發送多條請求
• 5、如何開啟nodejs websocket伺服器
• 6、如何通過js腳本獲取websocket對象

前台不用Socket.io.js如何發起webSocket請求連接？

var ws = new WebSocket(「ws://echo.websocket.org」);

ws.onopen = function(){ws.send(「Test!」); };

ws.onmessage = function(evt){console.log(evt.data);};

ws.onclose = function(evt){console.log(「WebSocketClosed!」);};

ws.onerror = function(evt){console.log(「WebSocketError!」);};

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

WebSocket的簡單實現

WebSocket協議是基於TCP的一種新的網路協議。 瀏覽器通信通常是基於HTTP 協議，為什麼還需要另一個協議？因為http只能由客戶端發起，不能由服務端發起。

而WebSocket 瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

WebSocket規範

WebSocket 協議本質上是一個基於 TCP 的協議。為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，附加信息如圖所示

連接過程（以js（客戶端）和java（伺服器端）為例）

js：ws.send（ String msg） ps：入參可以是字元串或者json字元串java：onMessage(String message）message為客戶端傳來的信息

java：sendUser（ String msg） js：ws.onmessage

4.斷開連接 onclose （ CloseReason reason）

CloseReason.CloseCode ( WebSocket關閉連接的狀態碼，類似http的404)

js部分：

java部分（javax實現）：

ps： session 用來唯一標識連接對象

使用註解@ServerEndpoint

參考文獻

javax websocket：（服務端實現api文檔）

js websocket：（客戶端api文檔）

rfc6455 （websocket協議規範）： ** 產品介紹**

在html頁面中，用js調取websocket，發送多條請求

發送，主要有以下幾個步驟：

1.用ClientManager實例化一個對象，並與服務端建立連接；

2.連接成功後，client端程序會調用與之關聯的ClientEndpoint類中的OnOpen方法，一般onOpen方法裡面我們主要是用來發送正式的請求報文（可以使用session.getBasicRemote().sendText(“start”)）；

3.發送完成後，服務端返迴響應，這時client程序會調用ClientEndpoint類中的OnMessage方法，OnMessage方法一般是用來解析服務端響應的

4.連接關閉；

如何開啟nodejs websocket伺服器

建立一個WebSocket的連接用send方法發送消息。

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

ws.onopen = function (e) {

console.log(‘Connection to server opened’);

}

function sendMessage() {

ws.send($(‘#message’).val());

}

如何通過js腳本獲取websocket對象

使用一個文本編輯器，把下面代碼複製保存在一個 websocket.html 文件中，然後只要在瀏覽器中打開它，頁面就會使用 websocket 自動連接，發送一個消息，顯示接受到的伺服器響應，然後關閉連接。

!DOCTYPE html  

meta charset=”utf-8″ /  

titleWebSocket Test/title  

script language=”javascript”type=”text/javascript”  

    var wsUri =”ws://echo.websocket.org/”; 

    var output;  

    function init() { 

        output = document.getElementById(“output”); 

        testWebSocket(); 

    }  

    function testWebSocket() { 

        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) 

        }; 

    }  

    function onOpen(evt) { 

        writeToScreen(“CONNECTED”); 

        doSend(“WebSocket rocks”); 

    }  

    function onClose(evt) { 

        writeToScreen(“DISCONNECTED”); 

    }  

    function onMessage(evt) { 

        writeToScreen(‘span style=”color: blue;”RESPONSE: ‘+ evt.data+’/span’); 

        websocket.close(); 

    }  

    function onError(evt) { 

        writeToScreen(‘span style=”color: red;”ERROR:/span ‘+ evt.data); 

    }  

    function doSend(message) { 

        writeToScreen(“SENT: ” + message);  

        websocket.send(message); 

    }  

    function writeToScreen(message) { 

        var pre = document.createElement(“p”); 

        pre.style.wordWrap = “break-word”; 

        pre.innerHTML = message; 

        output.appendChild(pre); 

    }  

    window.addEventListener(“load”, init, false);  

/script  

h2WebSocket Test/h2  

div id=”output”/div  

/html