WebSocket使用教程

最新推荐文章于 2023-02-23 08:32:17 发布

赶路人儿

最新推荐文章于 2023-02-23 08:32:17 发布

阅读量1.3k

点赞数

分类专栏： # html5 文章标签： websocket

本文链接：https://blog.csdn.net/liuxiao723846/article/details/46429261

版权

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

什么是WebSocket？看过html5的同学都知道，WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。现在我们来探讨一下html5的WebSocket

概念
HTML5作为下一代WEB标准，拥有许多引人注目的新特性，如Canvas、本地存储、多媒体编程接口、WebSocket 等等。今天我们就来看看具有“Web TCP”之称的WebSocket.

WebSocket的出现是基于Web应用的实时性需要而产生的。这种实时的Web应用大家应该不陌生，在生活中都应该用到过，比如新浪微博的评论、私信的通知，腾讯的WebQQ等。让我们来回顾下实时 Web 应用的窘境吧。在WebSocket出现之前，一般通过两种方式来实现Web实时用：轮询机制和流技术；其中轮询有不同的轮询，还有一种叫Comet的长轮询。

1.轮询：这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的缺点是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。

2.长轮询：是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。
3.流：常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

上述方式其实并不是真正的实时技术，只是使用了一种技巧来实现的模拟实时。在每次客户端和服务器端交互的时候都是一次 HTTP 的请求和应答的过程，而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息，这就增加了每次传输的数据量。但这些方式最痛苦的是开发人员，因为不论客户端还是服务器端的实现都很复杂，为了模拟比较真实的实时效果，开发人员往往需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。

基于上述弊端，实现Web实时应用的技术出现了，WebSocket通过浏览器提供的API真正实现了具备像C/S架构下的桌面系统的实时通讯能力。其原理是使用JavaScript调用浏览器的API发出一个WebSocket请求至服务器，经过一次握手，和服务器建立了TCP通讯，因为它本质上是一个TCP连接，所以数据传输的稳定性强和数据传输量比较小。

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

下面我们来详细介绍一下 WebSocket 协议，由于这个协议目前还是处于草案阶段，版本的变化比较快，我们选择目前最新的 draft-ietf-hybi-thewebsocketprotocol-17 版本来描述 WebSocket 协议。因为这个版本目前在一些主流的浏览器上比如 Chrome,、FireFox、Opera 上都得到比较好的支持。通过描述可以看到握手协议
客户端发到服务器的内容:

GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Origin: http://example.com
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13

从服务器到客户端的内容:

    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    Sec-WebSocket-Protocol: chat

这些请求和通常的 HTTP 请求很相似，但是其中有些内容是和 WebSocket 协议密切相关的。我们需要简单介绍一下这些请求和应答信息，”Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求，请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。其中客户端的Sec-WebSocket-Key和服务器端的Sec-WebSocket-Accept就是重要的握手认证信息了，这些内容将在服务器端实现的博文中讲解。

客户端
如概念篇中介绍的握手协议，客户端是由浏览器提供了API，所以只要使用JavaScript来简单调用即可.

WebSocket JavaScript 接口定义:

[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
 
// networking
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;

简单了解下接口方法和属性：

readyState表示连接有四种状态：
CONNECTING (0)：表示还没建立连接；
OPEN (1)：已经建立连接，可以进行通讯；
CLOSING (2)：通过关闭握手，正在关闭连接；
CLOSED (3)：连接已经关闭或无法打开；
url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；
close 方法就是关闭连接；
onopen连接建立，即握手成功触发的事件；
onmessage收到服务器消息时触发的事件；
onerror异常触发的事件；
onclose关闭连接触发的事件；

JavaScript调用浏览器接口实例如下：

var wsServer = 'ws://localhost:8888/Demo'; //服务器地址
var websocket = new WebSocket(wsServer); //创建WebSocket对象
websocket.send("hello");//向服务器发送消息
alert(websocket.readyState);//查看websocket当前状态
websocket.onopen = function (evt) {
//已经建立连接
};
websocket.onclose = function (evt) {
//已经关闭连接
};
websocket.onmessage = function (evt) {
//收到服务器消息，使用evt.data提取
};
websocket.onerror = function (evt) {
//产生异常
};

由于现阶段并不是所有浏览器都支持html5，所以可以使用下面语句进行判断：

if('WebSocket' in window){
	
}else{
	alert('本浏览器不支持WebSocket哦~');
}

服务器端
握手协议的客户端数据已经由浏览器代劳了，服务器端需要我们自己来实现，目前市场上开源的实现也比较多如：
    Kaazing WebSocket Gateway(一个 Java 实现的 WebSocket Server)；
    mod_pywebsocket(一个 Python 实现的 WebSocket Server)；
    Netty(一个 Java 实现的网络框架其中包括了对 WebSocket 的支持)；
    node.js(一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持)；
    WebSocket4Net(一个.net的服务器端实现)；

首先我们再来回顾下握手协议，客户端发到服务器的内容:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

从服务器到客户端的内容:

<pre name="code" class="javascript" style="color: rgb(68, 68, 68); font-size: 14px; letter-spacing: 0.5px; line-height: 25.2000007629395px; text-align: justify;">HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

如果要了解更多服务器端的实现，请查看 http://my.oschina.net/u/1266171/blog/357488

实例：(Tomcat从7.0.27这个版本开始支持WebSocket了)

1.浏览器向服务器发送一个 Upgrade 请求头，告诉服务器 “我想从 HTTP 协议切换到 WebSocket 协议”；
2.服务器端收到请求，如果支持 WebSocket ，则返回pUpgrade响应头，表示“我支持WebSocket协议，可以切换”；
3.浏览器接收响应头，从原来的HTTP协议切换WebSocket协议，WebSocket连接建立起来.
WebSocket连接建立在原来HTTP所使用的TCP/IP通道和端口之上，也就是说原来使用的是8080端口，现在还是使用8080端口，而不是使用新的TCP/IP连接。数据帧传输支持Text和Binary两种方式：在使用Text方式时，以0x00为起始点，以0xFF结束，数据以UTF-8编码置于中间；对于Binary方式则没有结束标识，而是将数据帧长度置于数据前面。

jsp页面：

<!DOCTYPE HTML>  
<html>  
<head>  
<title>WebSocket demo</title>  
<style>  
body {padding: 40px;}  
#outputPanel {margin: 10px;padding:10px;background: #eee;border: 1px solid #000;min-height: 300px;}  
</style>  
</head>  
<body>  
<input type="text" id="messagebox" size="60" />  
<input type="button" id="buttonSend" value="Send Message" />  
<input type="button" id="buttonConnect" value="Connect to server" />  
<input type="button" id="buttonClose" value="Disconnect" />  
<br>  
<% out.println("Session ID = " + session.getId()); %>  
<div id="outputPanel"></div>  
</body>  
<script type="text/javascript">  
    var infoPanel = document.getElementById('outputPanel'); // 输出结果面板  
    var textBox = document.getElementById('messagebox');    // 消息输入框  
    var sendButton = document.getElementById('buttonSend'); // 发送消息按钮  
    var connButton = document.getElementById('buttonConnect');// 建立连接按钮  
    var discButton = document.getElementById('buttonClose');// 断开连接按钮  
    // 控制台输出对象  
    var console = {log : function(text) {infoPanel.innerHTML += text + "<br>";}};  
    // WebSocket演示对象  
    var demo = {  
        socket : null,  // WebSocket连接对象  
        host : '',      // WebSocket连接 url  
        connect : function() {  // 连接服务器  
            window.WebSocket = window.WebSocket || window.MozWebSocket;  
            if (!window.WebSocket) {    // 检测浏览器支持  
                console.log('Error: WebSocket is not supported .');  
                return;  
            }  
            this.socket = new WebSocket(this.host); // 创建连接并注册响应函数  
            this.socket.onopen = function(){console.log("websocket is opened .");};  
            this.socket.onmessage = function(message) {console.log(message.data);};  
            this.socket.onclose = function(){  
                console.log("websocket is closed .");  
                demo.socket = null; // 清理  
            };  
        },  
        send : function(message) {  // 发送消息方法  
            if (this.socket) {  
                this.socket.send(message);  
                return true;  
            }  
            console.log('please connect to the server first !!!');  
            return false;  
        }  
    };  
    // 初始化WebSocket连接 url  
    demo.host=(window.location.protocol == 'http:') ? 'ws://' : 'wss://' ;  
    demo.host += window.location.host + '/Hello/websocket/say';  
    // 初始化按钮点击事件函数  
    sendButton.onclick = function() {  
        var message = textBox.value;  
        if (!message) return;  
        if (!demo.send(message)) return;  
        textBox.value = '';  
    };  
    connButton.onclick = function() {  
        if (!demo.socket)   demo.connect();  
        else console.log('websocket already exists .');  
    };  
    discButton.onclick = function() {  
        if (demo.socket) demo.socket.close();  
        else  console.log('websocket is not found .');  
    };  
</script>  
</html>

Tomcat 7提供了WebSocket支持，这里就以Tomcat 7 为例，探索一下如何在服务器端进行WebSocket编程。需要加载的依赖包为 \lib\catalina.jar、\lib\tomcat-coyote.jar这里有两个重要的类：WebSocketServlet 和 StreamInbound，前者是一个容器，用来初始化WebSocket环境；后者是用来具体处理WebSocket请求和响应的。编写一个Servlet类，继承自WebSocket，实现其抽象方法即可，代码如下：

package websocket;  
import java.util.concurrent.atomic.AtomicInteger;  
import javax.servlet.http.HttpServletRequest;  
import org.apache.catalina.websocket.StreamInbound;  
import org.apache.catalina.websocket.WebSocketServlet;  
  
public class HelloWebSocketServlet extends WebSocketServlet {  
    private static final long serialVersionUID = 1L;  
    private final AtomicInteger connectionIds = new AtomicInteger(0);  
    @Override  
    protected StreamInbound createWebSocketInbound(String arg0,  
            HttpServletRequest request) {  
        return new HelloMessageInbound(connectionIds.getAndIncrement(), request  
                .getSession().getId());  
    }  
}

package websocket;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.Reader;  
import java.nio.CharBuffer;  
import org.apache.catalina.websocket.StreamInbound;  
import org.apache.catalina.websocket.WsOutbound;  
  
public class HelloMessageInbound extends StreamInbound {  
  
    private String WS_NAME;  
    private final String FORMAT = "%s : %s";  
    private final String PREFIX = "ws_";  
    private String sessionId = "";  
  
    public HelloMessageInbound(int id, String _sessionId) {  
        this.WS_NAME = PREFIX + id;  
        this.sessionId = _sessionId;  
    }  
  
    @Override  
    protected void onTextData(Reader reader) throws IOException {  
        char[] chArr = new char[1024];  
        int len = reader.read(chArr);  
        send(String.copyValueOf(chArr, 0, len));  
    }  
  
    @Override  
    protected void onClose(int status) {  
        System.out.println(String.format(FORMAT, WS_NAME, "closing ......"));  
        super.onClose(status);  
    }  
  
    @Override  
    protected void onOpen(WsOutbound outbound) {  
        super.onOpen(outbound);  
        try {  
            send("hello, my name is " + WS_NAME);  
            send("session id = " + this.sessionId);  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
    }  
  
    private void send(String message) throws IOException {  
        message = String.format(FORMAT, WS_NAME, message);  
        System.out.println(message);  
        getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
    }  
  
    @Override  
    protected void onBinaryData(InputStream arg0) throws IOException {  
    }  
}

<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
    <display-name>websocket demo</display-name>  
    <servlet>  
        <servlet-name>wsHello</servlet-name>  
        <servlet-class>websocket.HelloWebSocketServlet</servlet-class>  
    </servlet>  
    <servlet-mapping>  
        <servlet-name>wsHello</servlet-name>  
        <url-pattern>/websocket/say</url-pattern>  
    </servlet-mapping>  
  
    <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
    </welcome-file-list>  
</web-app>

参考文章：http://my.oschina.net/u/1266171/blog/357488

http://blog.csdn.net/whucyl/article/details/20153207

赶路人儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
WebSocket使用教程

什么是WebSocket？看过html5的同学都知道，WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。现在我们来探讨一下html5的WebSocket概念 HTML5作为下一代WEB标准，拥有许多
复制链接

扫一扫