WebSocket 入门 第一课（学习笔记）

websocket:

官网：http://www.websocket.org/

 

websocket其实就是：

Web端的socket,server和client可以相互发送消息想，本质就是TCP的连接；

也就是说：H5 websocket定义了一个API接口，让web页面通过websocket协议与远程主机直接连接。这样的好处就是HTML5 WebSockets大大减少了不必要的网络流量和延迟。

官网解释是：

HTML5 WebSockets规范定义了一个API，使Web页面能够使用WebSockets协议与远程主机进行双向通信。它引入了WebSocket接口并定义了一个全双工通信通道，该通道通过Web上的单个插槽进行操作。与通过维护两个连接来模拟全双工连接的不可扩展的轮询和长轮询解决方案相比，HTML5 WebSockets大大减少了不必要的网络流量和延迟。

 

HTML5 WebSockets解决了代理和防火墙等网络危害，可以通过任何连接实现流式传输，并且能够通过单一连接支持上游和下游通信，基于HTML5 WebSockets的应用程序减轻了服务器负担，允许现有机器支持更多并发连接。下图显示了基于WebSocket的基本体系结构，其中浏览器使用WebSocket连接进行全双工，与远程主机直接通信。

 

WebSockets提供的一个更独特的功能是它能够遍历防火墙和代理，这是许多应用程序的问题区域。Comet风格的应用程序通常采用长轮询作为防火墙和代理的基本防线。该技术是有效的，但不适合具有低于500毫秒延迟或高吞吐量要求的应用。基于插件的技术（如Adobe Flash）也提供了一定程度的套接字支持，但长期以来一直承受着WebSockets现在解决的代理和防火墙遍历问题。

 

WebSocket协议

WebSocket协议旨在与现有的Web基础结构良好协作。作为此设计原则的一部分，协议规范定义WebSocket连接作为HTTP连接开始其生命周期，保证与WebSocket前世界的完全向后兼容性。从HTTP到WebSocket的协议切换称为WebSocket握手。

 

 

删除看不懂的，以上就是我理解的！！！

 

websocket的使用：

 

1、想要连接远程服务器，需要一个新的websocket实例，并且需要为websocket提供一个URL，这个URL表示的就是希望连接的端点。所以说第一步建立全新的websocket，并连接远程端点；

 

var myWebSocket = new WebSocket（“ws：//www.websockets.org”）;

 

websocket括号里面的就是连接远程端点的URL，注意，这里的URL前缀不再是HTTP协议，而是 ‘ws://’ 表示的是websocket协议，当然还有一种安全websocket协议的前缀 ‘wss://’ ,只有这两种。

2、创建之后记得打开，不然没法用；使用打开 WebSocket 的方法：' onopen '，开了就得关闭，方法为：' onclose '。具体如下：

myWebSocket.onopen = function（evt）{alert（“Connection open ...”）; };

myWebSocket.onclose = function（evt）{alert（“Connection closed。”）; };

 

 

3、在打开与关闭websocket之间就是我们对websocket的操作，接受和发送我们想要远程端点得到的信息。发送：‘ send ’, 接受：‘onmessage’；具体如下：

myWebSocket.onmessage = function（evt）{alert（“收到消息：”+ evt.data）; };

myWebSocket.send（“Hello WebSockets！”）;

 

 

以上便可以简单实现web页面通过websocket（websocket协议）与远程端点（远程主机）实现简单的连接功能。

 

小例子如下：

功能介绍：页面中有一个输入框，发送按钮与div元素。将输入框中的信息通过websocket发送信息展示在div元素中。

 

发送