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