基于Tomcat运行HTML5 WebSocket echo实例详解-H5 チュートリアル-php.cn

基于Tomcat运行HTML5 WebSocket echo实例详解

PHP中文网

リリース： 2016-05-17 09:07:09

オリジナル

2288 人が閲覧しました

　　一、概述

　　作为HTML5新特性之一的WebSocket组件，在实时性有一定要求的WEB应用开发中还是有一定用武之地，高版本的IE、Chrome、FF浏览器都支持Websocket，标准的Websocket通信是基于RFC6455实现服务器端与客户端握手与消息接发的。如果对Websocket通信不是太理解，可以查看RFC文档即可，简单说就是通过发送HTTP请求，实现双方握手，将无状态的HTTP通信协议进一步升级成有状态的通信协议，同时Websocket还支持子协议选项与安全传输。标准的websocket连接URL以ws开头，如果是基于TLS的则以wss开头。基于Websocket可以很方便的开发基于web聊天程序，各种网页消息通知与推送通知。

　　如果非要扒一扒Websocket的今生前世的话，还记得最早的基于HTTP轮询实现网页即时通信的方式，那种做法比较消耗资源、于是有人改进了编程CometD长连接方式，可是本质上还是换汤不换药，而websocket的出现正好解决了这些问题，但是很多浏览器的低版本还是不支持websocket,于是还催生了一些基于websocket理念实现的JS通信框架，其中学得比较像的有SockJS与socket.io，他们都号称支持websocket，然后如果浏览器端不支持原生的websocket，它们会自动启用fallback选项使用其它诸如ajax、Http轮询、长轮询/连接、甚至是flash的socket等机制实现模拟websocket的工作方式，但是他们最大的弊端是如果客户端使用了这些框架，服务器必须用它们，否则等待开发者就是一大堆无法回避的问题，同时很多都是无解的。主要原因在于它们实现自己的协议集，不照它们的格式处理数据没法玩。闲话说的有点多。

　　二、实现步骤

　　Tomcat7的高版本中实现了Websocket服务器端RFC6455标准协议，可以跟浏览器端websocket进行通信，首先要做好如下几步：

　　1.安装高版本JDK – JDK8

　　2.安装Tomcat 7.0.64

　　3.在eclipse中建立一个动态的web项目

　　根据JSR标准，Java中实现websocket的标准接口可以基于注解方式，tomcat也搞好了，只有我们实现如下代码，即可创建一个websocket回声服务器：

package com.websocket.demo;  
   
import java.io.IOException;  
import java.nio.ByteBuffer;  
   
import javax.websocket.OnMessage;  
import javax.websocket.OnOpen;  
import javax.websocket.Session;  
import javax.websocket.server.ServerEndpoint;  
   
@ServerEndpoint(value = "/echo")  
public class EchoExample {  
       
    @OnMessage  
    public void echoTextMessage(Session session, String msg, boolean last) {  
        try {  
            if (session.isOpen()) {  
                System.out.println("received from client message = " + msg);  
                session.getBasicRemote().sendText(msg, last);  
            }  
        } catch (IOException e) {  
            try {  
                session.close();  
            } catch (IOException e1) {  
            }  
        }  
    }  
       
    @OnOpen  
    public void openConn(Session session) throws IOException {  
        session.getBasicRemote().sendText("hello web socket"); // means open it  
    }  
       
    @OnMessage  
    public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) {  
        System.out.println("send binary message...");  
        try {  
            if (session.isOpen()) {  
                System.out.println("byte buffer lenghth : " + bb.array().length);  
                System.out.println("byte buffer content: " + ((bb.array()[0]) & 0xff));  
                System.out.println("byte buffer content: " + ((bb.array()[1]) & 0xff));  
                System.out.println("byte buffer content: " + ((bb.array()[2]) & 0xff));  
                session.getBasicRemote().sendBinary(bb, last);  
            }  
        } catch (IOException e) {  
            try {  
                session.close();  
            } catch (IOException e1) {  
                // Ignore  
            }  
        }  
    }  
   
}

ログイン後にコピー

　　如何在tomcat中启动websocket服务器，首先需要在web.xml添加如下配置：

[listener]  
    [listener-class]org.apache.tomcat.websocket.server.WsContextListener[/listener-class]  
[/listener]

ログイン後にコピー

　　然后实现ServerApplicationConfig接口，实现如下：

　　创建网页echo.html，内容如下：

[html] 
[head] 
[title>Web Socket Echo Test[/title] 
[script] 
        var ws = null;  
        var count = 0;  
        function setConnected(connected) {  
            document.getElementById(&#39;connect&#39;).disabled = connected;  
            document.getElementById(&#39;disconnect&#39;).disabled = !connected;  
            document.getElementById(&#39;echo&#39;).disabled  = !connected;  
        }  
   
        function connect() {  
            var target = document.getElementById(&#39;target&#39;).value;  
            if (target == &#39;&#39;) {  
                alert(&#39;Please select server side connection implementation.&#39;);  
                return;  
            }  
   
            if (&#39;WebSocket&#39; in window) {  
                ws = new WebSocket(target);  
            } else if (&#39;MozWebSocket&#39; in window) {  
                ws = new MozWebSocket(target);  
            } else {  
                alert(&#39;WebSocket is not supported by this browser.&#39;);  
                return;  
            }  
               
            ws.onopen = function () {  
                setConnected(true);  
                log(&#39;Info: WebSocket connection opened.&#39;);  
            };  
            ws.onmessage = function (event) {  
                log(&#39;Received: &#39; + event.data);

ログイン後にコピー

以上就是基于Tomcat运行HTML5 WebSocket echo实例详解的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！