HTML5 WebSocket API

25-03-13 9

关于HTML5WebSocketAPI的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于HTML(015)HTML5实时通讯WebSocket、HTML5-Websocket、html5-本

关于HTML5 WebSocket API的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于HTML (015) HTML5 实时通讯WebSocket、HTML5 - Websocket、html5 - 本质就是websocket的客户端，php Websocket 怎么接收数据、HTML5 WebSocket等相关知识的信息别忘了在本站进行查找喔。

本文目录一览：

HTML5 WebSocket API
HTML (015) HTML5 实时通讯WebSocket
HTML5 - Websocket
html5 - 本质就是websocket的客户端，php Websocket 怎么接收数据
HTML5 WebSocket

HTML5 WebSocket API

Web Sockets是新一代的双向通信技术的Web应用程序运行在一个单一的插座，通过HTML 5兼容的浏览器的JavaScript接口暴露。
一旦你得到一个Web服务器的网络连接，你可以把数据从浏览器到服务器通过调用一个send()方法和接收数据从服务器到浏览器的onmessage事件句柄。为了建立WebSocket通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。
现在WebSocket服务器有很多，还在开发中的更多。有一下几种：

Asp.Net SignalR：优先使用WebSocket,在不支持的情况下启用长连接
Kaazing WebSocket Gateway：一种基于Java的WebSocket网关。
mod_pywebsocket：一种基于Python的Apache HTTP服务器扩展。
Netty：一种包含WebSocket的Java框架。
node.js：一种驱动多个WebSocket服务器的服务器端JavaScript框架。

下面是创建一个新的WebSocket对象的API。

var Socket = new WebSocket(url,[protocal] );

这里的第一个参数，网址，指定要连接的网址。第二个属性，协议是可选的，如果存在，指定一个子协议，服务器必须支持连接成功。

属性：

1.readyState

ReadOnly属性readyState代表连接的状态.

ws.CONNECTING：0---尚未建立简介；

ws.OPEN：1---表示连接建立和通信是可能的；

ws.CLOSING：2--表示连接正在通过关闭握手；

ws.CLOSED：3--表示连接已关闭或无法打开；

2.bufferedamount

ReadOnly属性bufferedamount代表UTF-8文本已列队send()方法使用的字节数。

3.binaryType 发送数据的类型，默认blob

4.url 当前建立简介的服务器URL地址

5.protocol 指定的协议名称，默认为空

方法：

1.send(data);

使用建立的链接发送数据

2.close([Number code],[String reason]);

中止现有链接

事件：

1.onopen,当建立链接成功后触发

2.onmessage ，当接收到服务器发送数据时触发

3.onerror，当通信中出现任何错误时，此事件会发生。

4.onclose,当连接关闭时发生此事件。

实例1，判断浏览器知否支持WebSocket

测试结果说明：IE10及以上浏览器支持，FF，Google也支持

if (window.WebSocket) {
    //console.info(window.WebSocket);   //function WebSocket() { [native code]}
    var url = 'ws://localhost:55373/upload1.ashx';
    var ws = new WebSocket(url);
    console.info(ws);
    console.info(ws.CONNECTING);//0
    console.info(ws.OPEN); //1
    console.info(ws.CLOSING); //2
    console.info(ws.CLOSED); //3
    //ws.protocol  //协议名称
    //ws.url       //服务器URL地址
    //ws.binaryType // 发送数据类型 默认blob
    //ws.bufferedamount //当前缓冲区字节大小
} else {
    alert('不支持WebSocket');
}

实例2，

var url = 'ws://localhost:55373/upload1.ashx';
var ws = new WebSocket(url);
//ws.bufferedamount  //表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
ws.onopen = function (e) {
    console.log('链接打开');
    //e  Event 对象
    console.info(e);
    //e.target  --- 当前事件触发对象，也就是 new的WebSocket 对象
    ws.send('hello ws,当前协议：' + e.target.protocol);
}
ws.onmessage = function (e) {
    //e MessageEvent 对象
    //e.data 从服务器发送过来的数据
    console.info(e);
    console.info('接受到数据：' + e.data);
}
ws.onclose = function (e) {
    console.info(e);
    console.log('closed');
}
ws.onerror = function (e) {
    console.info(e);
    console.log('发生异常');
}

HTML (015) HTML5 实时通讯WebSocket

一、WebSocket

1、概述

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API
中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP
连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage
事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

    var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

2、WebSocket 属性

Socket.readyState：只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedamount：只读属性 bufferedamount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

3、WebSocket 事件

open ： Socket.onopen 连接建立时触发
message ： Socket.onmessage 客户端接收服务端数据时触发
error ： Socket.onerror 通信发生错误时触发
close ： Socket.onclose 连接关闭时触发

4、WebSocket 方法

Socket.send() ：使用连接发送数据
Socket.close()：关闭连接

5、Websocket握手请求

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP
请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP
请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket
连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

客户端请求

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

服务器回应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/

Connection 必须设置 Upgrade，表示客户端希望连接升级。
Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。
Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 BASE-64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。

6、Websocket 端口

Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：

ws://example.com/wsapi
wss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS
之上时，默认使用 443 端口。

7、客户端代码

    菜鸟教程(runoob.com)

[运行 WebSocket](javascript:WebSockettest())

二、C# 建立Socket连接

1、利用原始socket

https://www.cnblogs.com/xqaizx/p/9446863.html

2、利用第三方库

c#可以选择websocket-sharp来实现websocket
Server。或者https://github.com/Azure/DotNetty

    class Program
        {
            static void Main(string[] args)
            {
                var wssv = new WebSocketServer(10086);
                wssv.AddWebSocketService("/scan");
                wssv.Start();
                if (wssv.IsListening)
                {
                    Console.WriteLine("Listening on port {0}, and providing WebSocket services:", wssv.Port);
                    foreach (var path in wssv.WebSocketServices.Paths)
                        Console.WriteLine("- {0}", path);
                }
    
                Console.WriteLine("\nPress Enter key to stop the server...");
                Console.ReadLine();
    
                wssv.Stop();
            }
        }
    
        public class ScannerHandler : WebSocketBehavior
        {
            protected override void OnMessage(MessageEventArgs e)
            {
                if(e.Data == "scan")
                {
                    ScanResult result = ScanerHelper.Scan("D:\\test.jpg");
                    if (result.Success)
                    {
                        Console.WriteLine("scan success");
                        Send("scan success");
                    }
                    else
                    {
                        Send("scan eror");
                    }
                }
               
            }
        }

HTML5 - Websocket

关键词：

HTML5
网络通讯协议

并肩HTTP

基于TCP
客户端与服务器全双工通讯

双向数据传输

实现长链接、持久性链接

HTTP是非持久性

总结：

Websocket是一种在单个TCP连接上进行全双工通讯的协议，他能够允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

（在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。）

作用：

实现推送技术

优点：

节省服务器资源和带宽，并且能够更实时地进行通讯

应用：聊天室

传统HTTP协议要实现聊天室功能需要用到AJAX轮询

Websockets协议实现聊天室功能很简单。

AJAX轮询原理：

轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。返回之后，链接断开。下次通讯需要重新发送ajax请求了。

这种传统的模式带来很明显的缺点。

AJAX轮询缺点：即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

ajax轮询与Websockets长连接

二者原理图对比：

websockets建立一次链接，长久通讯；

ajax轮询需要每秒发送一次请求。每请求一次都要三次握手。请求完毕就会断开链接，每断开一次都要四次挥手；啊哈哈哈。

性能来说，Websocket更优。

Websocket API 使用方法：

一、创建

二、事件

open：当客户端和Websocket服务端连接成功的时候就会触发

事件需要用addEventListener绑定：比如open事件注册示例

websocket.addEventListener(''open'',function(e){

  console.log(e,websocket.readyState);

});

客户端接受到服务器返回的数据时，会触发message事件，所以我们监听这个事件并注册回调函数就行：

1 websocket.addEventListener(''message'',function(event){
2 
3   console.log(event);
4 
5   console.log(event.data);// event里的data属性，就是服务器返回的数据
6 
7 });

close就是连接断开的时候出发的事件，同上绑定方法。

三、属性

四、方法

send()：客户端主动向服务端发送消息

send使用演示 - 比如在链接成功后，发送一端文案过去：

websocket.addEventListener(''open'',function(e){

  console.log(e,websocket.readyState);

  websocket.send(''发送一个方法'')

});

五、其他api讲解可以看MDN

控制台查看websocket请求发送的情况：

绿色表示发送，红色表示接受的。

ps：图中之所以长这样（指请求和响应的文案都一样），是因为我们借用官网的echo这个服务器，是我们给他发送啥，他就原封不动给我们返回啥。

html5 - 本质就是websocket的客户端，php Websocket 怎么接收数据

class WebsocketClient
{

    private $_Socket = null;

    public function __construct($host, $port)
    {
        $this-&gt;_connect($host, $port);
    }

    public function __destruct()
    {
        $this-&gt;_disconnect();
    }

    public function sendData($data)
    {
        // send actual data:
        return fwrite($this-&gt;_Socket, $this-&gt;encode($data)) or die(''Error:'' . $errno . '':'' . $errstr);

        $wsData = fread($this-&gt;_Socket, 2000);
        $retData = trim($wsData, chr(0) . chr(255));

        return $retData;
    }

    private function encode($data)
    {
        $data = is_array($data) || is_object($data) ? json_encode($data) : (string)$data;
        $len = strlen($data);
        $mask = array();
        for ($j = 0; $j  127)
            {
                return false;
            }
        }
        $head[1] += 128;
        $head = array_merge($head, $mask);
        foreach ($head as $k =&gt; $v)
        {
            $head[$k] = chr($v);
        }
        $mask_data = '''';
        for ($j = 0; $j _generateRandomString(32);
        $key2 = $this-&gt;_generateRandomString(32);
        $key3 = $this-&gt;_generateRandomString(8, false, true);
        $header = "GET ws://" . $host . ":" . $port . "/ HTTP/1.1\r\n";
        $header .= "Host: " . $host . ":" . $port . "\r\n";
        $header .= "Connection: Upgrade\r\n";
        $header .= "Pragma: no-cache\r\n";
        $header .= "Cache-Control: no-cache\r\n";
        $header .= "Upgrade: websocket\r\n";
        $header .= "Sec-WebSocket-Version: 13\r\n";
        $header .= "User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36\r\n";
        $header .= "Accept-Encoding: gzip, deflate, sdch\r\n";
        $header .= "Accept-Language: zh-CN,zh;q=0.8\r\n";
        $header .= "Sec-WebSocket-Key: " . $key1 . "\r\n";
        $header .= "Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n";
        $header .= "\r\n";
        $this-&gt;_Socket = fsockopen($host, $port, $errno, $errstr, 2);
        fwrite($this-&gt;_Socket, $header) or die(''Error: '' . $errno . '':'' . $errstr);
        $response = fread($this-&gt;_Socket, 2000);

        /**
         * @todo: check response here. Currently not implemented cause "2 key handshake" is already deprecated.
         * See: http://en.wikipedia.org/wiki/WebSocket#WebSocket_Protocol_Handshake
         */
        return true;
    }

    private function _disconnect()
    {
        fclose($this-&gt;_Socket);
    }

    private function _generateRandomString($length = 10, $addSpaces = true, $addNumbers = true)
    {
        $characters = ''abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"§$%&amp;/()=[]{}'';
        $useChars = array();
        // select some random chars:
        for ($i = 0; $i 
<p>能向服务器发送数组，怎么接收数据？</p>

                            
                        


                                                                                                                        
                     <h2>回复内容：</h2>
                      
                                                            
<pre>class WebsocketClient
{

    private $_Socket = null;

    public function __construct($host, $port)
    {
        $this-&gt;_connect($host, $port);
    }

    public function __destruct()
    {
        $this-&gt;_disconnect();
    }

    public function sendData($data)
    {
        // send actual data:
        return fwrite($this-&gt;_Socket, $this-&gt;encode($data)) or die(''Error:'' . $errno . '':'' . $errstr);

        $wsData = fread($this-&gt;_Socket, 2000);
        $retData = trim($wsData, chr(0) . chr(255));

        return $retData;
    }

    private function encode($data)
    {
        $data = is_array($data) || is_object($data) ? json_encode($data) : (string)$data;
        $len = strlen($data);
        $mask = array();
        for ($j = 0; $j  127)
            {
                return false;
            }
        }
        $head[1] += 128;
        $head = array_merge($head, $mask);
        foreach ($head as $k =&gt; $v)
        {
            $head[$k] = chr($v);
        }
        $mask_data = '''';
        for ($j = 0; $j _generateRandomString(32);
        $key2 = $this-&gt;_generateRandomString(32);
        $key3 = $this-&gt;_generateRandomString(8, false, true);
        $header = "GET ws://" . $host . ":" . $port . "/ HTTP/1.1\r\n";
        $header .= "Host: " . $host . ":" . $port . "\r\n";
        $header .= "Connection: Upgrade\r\n";
        $header .= "Pragma: no-cache\r\n";
        $header .= "Cache-Control: no-cache\r\n";
        $header .= "Upgrade: websocket\r\n";
        $header .= "Sec-WebSocket-Version: 13\r\n";
        $header .= "User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36\r\n";
        $header .= "Accept-Encoding: gzip, deflate, sdch\r\n";
        $header .= "Accept-Language: zh-CN,zh;q=0.8\r\n";
        $header .= "Sec-WebSocket-Key: " . $key1 . "\r\n";
        $header .= "Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n";
        $header .= "\r\n";
        $this-&gt;_Socket = fsockopen($host, $port, $errno, $errstr, 2);
        fwrite($this-&gt;_Socket, $header) or die(''Error: '' . $errno . '':'' . $errstr);
        $response = fread($this-&gt;_Socket, 2000);

        /**
         * @todo: check response here. Currently not implemented cause "2 key handshake" is already deprecated.
         * See: http://en.wikipedia.org/wiki/WebSocket#WebSocket_Protocol_Handshake
         */
        return true;
    }

    private function _disconnect()
    {
        fclose($this-&gt;_Socket);
    }

    private function _generateRandomString($length = 10, $addSpaces = true, $addNumbers = true)
    {
        $characters = ''abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"§$%&amp;/()=[]{}'';
        $useChars = array();
        // select some random chars:
        for ($i = 0; $i 
<p>能向服务器发送数组，怎么接收数据？</p>

                            
                        
            <pdata-id="1020000005871060">
                                    </p><p>http://www.workerman.net/workerman-chat<br>可以看下这个，PHP写的websocket聊天室，客服功能其实可以用里面的单聊功能实现 .有人用它实现过客服，包括网页和客户端软件。<br>开发手册：http://workerman.net/gatewaydoc/<br>Demo：http://chat.workerman.net/</p>
                            
            <pdata-id="1020000005852869">
                                    </p><p>百度上关于php websocket的教程已经有足够多了，你可以去看下。</p>
                            
            <pdata-id="1020000005871112">
                                    </p><p>socket_read读取</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182"rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p>
                            
            <pdata-id="1020000005876854">
                                    </p><p>已解决非常感谢各位解答</p>

登录后复制

HTML5 WebSocket

html5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通讯的协议

html5 WebSocket API 的实现中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据

当获取 Web Socket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据

下面的代码创建了一个 WebSocket 对象

var ws = new WebSocket(url,[protocol] );

new WebSocket() 第一个参数 url,指定连接的 URL

第二个参数 protocol 是可选的，指定了可接受的子协议

HTML5 WebSocket 属性

下表列出了 WebSocket 对象的属性

其中：ws 是 WebSocket 的一个对象

属性	描述
ws.readyState	只读属性 readyState 表示连接状态，可以是以下值 0 - 表示连接尚未建立 1 - 表示连接已建立，可以进行通信 2 - 表示连接正在进行关闭 3 - 表示连接已经关闭或者连接不能打开
ws.bufferedamount	只读属性 bufferedamount 表示已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数

WebSocket 事件

下表列出了 WebSocket 对象的相关事件

其中： ws 是 WebSocket 的一个对象

事件	事件处理程序	描述
open	ws.onopen	连接建立时触发
message	ws.onmessage	客户端接收服务端数据时触发
error	ws.onerror	通信发生错误时触发
close	ws.onclose	连接关闭时触发

WebSocket 方法

下表列出了 WebSocket 对象的相关方法

其中： ws 是 WebSocket 的一个对象

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求

这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息 "Upgrade: WebSocket" 表明这是一个申请协议升级的 HTTP 请求

服务器端解析这些附加的头信息然后产生应答信息返回给客户端

客户端和服务器端的 WebSocket 连接就建立起来了

双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接

客户端的 HTML 和 JavaScript

目前大部分浏览器支持 HTML5 WebSocket() 接口

我们可以在以下浏览器中尝试： Chrome,Mozilla,Opera 和 Safari

ws.html

<!DOCTYPE HTML>
<Meta charset="utf-8">
<script>
   function WebSockettest()
   {
      if ("WebSocket" in window)
      {
         alert("您的浏览器支持 WebSocket!");

         // 打开一个 web socket         var ws = new WebSocket("ws://localhost:9998/echo");

         ws.onopen = function()
         {
            // Web Socket 已连接上，使用 send() 方法发送数据
            ws.send("发送数据");
            alert("数据发送中...");
         };

         ws.onmessage = function (evt) 
         { 
            var received_msg = evt.data;
            alert("数据已接收...");
         };

         ws.onclose = function()
         { 
            // 关闭 websocket
            alert("连接已关闭..."); 
         };
      }

      else
      {
         // 浏览器不支持 WebSocket
         alert("您的浏览器不支持 WebSocket!");
      }
}
</script>
<div id="sse">
   <a href="javascript:WebSockettest()">运行 WebSocket</a>
</div>

安装 pywebsocket

在执行以上程序前，我们需要创建一个支持 WebSocket 的服务

可从pywebsocket下载 mod_pywebsocket,或者使用 git 命令下载

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 需要 python 环境支持

mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：

解压下载的文件

进入 pywebsocket 目录

执行命令：

$ python setup.py build $ sudo python setup.py install

查看文档说明

pydoc mod_pywebsocket

开启服务

在 pywebsocket/mod_pywebsocket 目录下执行以下命令

$ sudo python standalone.py -p 9998 -w ../example/

以上命令会开启一个端口号为 9998 的服务，使用 -w 来设置处理程序 echo_wsh.py 所在的目录。

现在我们可以在 Chrome 浏览器打开前面创建的 ws.html 文件

如果浏览器支持 WebSocket(),点击"运行 WebSocket"

本文标签：

HTML5 WebSocket API