html5 WebSocket在jetty7中实现的代码分享-Tutorial H5-php.cn

一、WebSocket简介

对于一些对数据实时性要求较高的系统，比如股票行情、在线聊天、微博，实现数据的实时推送是必须的。通常实现实时推送的方式有：

1、轮询：隔一段时间发送数据(如：webqq)

2、socket：以往普通的网页是不支持socket接收消息的。可以通过flash或者applet来作为socket的客户端

3、长连接：指在一个TCP连接上可以连续发送多个数据包，在TCP连接保持期间，如果没有数据包发送，需要双方发检测包以维持此连接，一般需要自己做

在线维持。

----------------------------------------------------------------------------------------------

html5通过window.WebSocket(firefox下是window.MozWebSocket)提供了一种非http的双向连接，这个连接是实时的更是永久的，除非被显示colse。

这就表示只要客户端打开一个Socket并且请求建立了连接(just once)，服务端就能实时接收并发送消息，不需手动检测和维持状态。

WebSocket提供的方法和属性可以在firebug中输入Window.WebSocket.prototype看到。

接下去的代码列出了基本的使用思路：

var location = "ws://localhost:port/serlet/xxx";
//服务端处理的servlet

var webSocket = new WebSocket(location);

//webSocket.readyState
var readyStates = {
    "CONNECTING":"正在连接“，
    ”OPEN“ : "已建立连接",
    "CLOSING":"正在关闭连接",
    "CLOSED":"已关闭连接"
}

webSocket.send(data);//发送数据到服务端,目前只支持文本类型。JSON.stringify(data);JSON.parse(data);

webSocket.onMessage = function(event){
     var data = event.data;//从服务端过来的数据
}

webSocket.onOpen = function(event){
     //开始通信
}

webSocket.onClose = function(event){
   //结束通信
}
webSocket.close();

Salin selepas log masuk

二、一个基于jetty(java服务器)的例子

目前Apache还不支持WebSocket，各种语言都有各自的方式可以实现它，这里在Java中实现了。

步骤一：下载一个jetty，解压放在任意盘下。jetty7及以上才支持WebSocket，下载地址：download.eclipse.org/jetty/stable-7/dist/

步骤二：下载eclipse（不推荐用MyEclipse，比较麻烦，需要安装其他的插件），必须支持jetty7，版本是越高越好。

步骤三：在eclipse中安装插件，help---Install new software...----url为：eclipse-jetty.sourceforge.net/update/

步骤四：新建一个Dynamic Web Project

目录结构如下

步骤五：拷入如下代码：

TailorWebSocketServlet.java

package com.test;

import java.io.IOException;
import java.util.Date;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.eclipse.jetty.websocket.WebSocket;
import org.eclipse.jetty.websocket.WebSocketServlet;


public class TailorWebSocketServlet extends WebSocketServlet {
    private static final long serialVersionUID = -7289719281366784056L;
    public static String newLine = System.getProperty("line.separator");

    private final Set<TailorSocket> _members = new CopyOnWriteArraySet<TailorSocket>();
    private ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();


    public void init() throws ServletException {
        super.init();
        executor.scheduleAtFixedRate(new Runnable() {

            public void run() {
                System.out.println("Running Server Message Sending");
                for(TailorSocket member : _members){
                    System.out.println("Trying to send to Member!");
                    if(member.isOpen()){
                        System.out.println("Sending!");
                        try {
                            member.sendMessage("from server : happy and happiness! "+new Date()+newLine);
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
        }, 2, 2, TimeUnit.SECONDS);

    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        getServletContext().getNamedDispatcher("default").forward(request,
                response);
    }

    public WebSocket doWebSocketConnect(HttpServletRequest request,
            String protocol) {
        return new TailorSocket();
    }

    class TailorSocket implements WebSocket.OnTextMessage {
        private Connection _connection;

        public void onClose(int closeCode, String message) {
            _members.remove(this);
        }

        public void sendMessage(String data) throws IOException {
            _connection.sendMessage(data);
        }

    
        public void onMessage(String data) {
            System.out.println("Received: "+data);
        }

        public boolean isOpen() {
            return _connection.isOpen();
        }


        public void onOpen(Connection connection) {
            _members.add(this);
            _connection = connection;
            try {
                connection.sendMessage("onOpen:Server received Web Socket upgrade and added it to Receiver List.");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

Salin selepas log masuk

test.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>Chat by Web Sockets</title>
        <script type=&#39;text/javascript&#39;>
            if (!window.WebSocket)
                alert("window.WebSocket unsuport!");

            function $() {
                return document.getElementById(arguments[0]);
            }
            function $F() {
                return document.getElementById(arguments[0]).value;
            }

            function getKeyCode(ev) {
                if (window.event)
                    return window.event.keyCode;
                return ev.keyCode;
            }

            var server = {
                connect : function() {
                    var location ="ws://localhost:8888/servlet/a";
                    this._ws =new WebSocket(location);
                    this._ws.onopen =this._onopen;
                    this._ws.onmessage =this._onmessage;
                    this._ws.onclose =this._onclose;
                },

                _onopen : function() {
                    server._send(&#39;send to server : websockets are open for communications!&#39;);
                },

                _send : function(message) {
                    if (this._ws)
                        this._ws.send(message);
                },

                send : function(text) {
                    if (text !=null&& text.length >0)
                        server._send(text);
                },

                _onmessage : function(m) {
                    if (m.data) {
                        var messageBox = $(&#39;messageBox&#39;);
                        var spanText = document.createElement(&#39;span&#39;);
                        spanText.className =&#39;text&#39;;
                        spanText.innerHTML = m.data;
                        var lineBreak = document.createElement(&#39;br&#39;);
                        messageBox.appendChild(spanText);
                        messageBox.appendChild(lineBreak);
                        messageBox.scrollTop = messageBox.scrollHeight
                                - messageBox.clientHeight;
                    }
                },

                _onclose : function(m) {
                    this._ws =null;
                }
            };
        </script>
        <style type=&#39;text/css&#39;>
            div {
                border: 0px solid black;
            }

            div#messageBox {
                clear: both;
                width: 40em;
                height: 20ex;
                overflow: auto;
                background-color: #f0f0f0;
                padding: 4px;
                border: 1px solid black;
            }

            div#input {
                clear: both;
                width: 40em;
                padding: 4px;
                background-color: #e0e0e0;
                border: 1px solid black;
                border-top: 0px
            }

            div.hidden {
                display: none;
            }

            span.alert {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <div id=&#39;messageBox&#39;></div>
        <div id=&#39;input&#39;>
            <div>
                <input id=&#39;connect&#39; type=&#39;submit&#39; name=&#39;Connect&#39;
                    value=&#39;Connect&#39; />
            </div>
        </div>
        <script type=&#39;text/javascript&#39;>
            $(&#39;connect&#39;).onclick =function(event) {
                server.connect();
                returnfalse;
            };
        </script>

        <p>
            JAVA Jetty for WebSocket
        </p>
    </body>
</html>

Salin selepas log masuk

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    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_2_5.xsd">
    <display-name>tailor</display-name>
    <servlet>
        <servlet-name>WebSocket</servlet-name>
        <servlet-class>com.test.TailorWebSocketServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>WebSocket</servlet-name>
        <url-pattern>/servlet/*</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>test.html</welcome-file>
    </welcome-file-list>
</web-app>

Salin selepas log masuk

websocket.xml

<?xml version="1.0"  encoding="ISO-8859-1"?>
<!DOCTYPE Configure PUBLIC "-//Jetty//Configure//EN" "http://www.eclipse.org/jetty/configure.dtd">

<!-- ==================================================================
Configure and deploy the test web application in $(jetty.home)/webapps/test

Note. If this file did not exist or used a context path other that /test
then the default configuration of jetty.xml would discover the test
webapplication with a WebAppDeployer.  By specifying a context in this
directory, additional configuration may be specified and hot deployments 
detected.
===================================================================== -->

<Configure class="org.eclipse.jetty.webapp.WebAppContext">


  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  <!-- Required minimal context configuration :                        -->
  <!--  + contextPath                                                  -->
  <!--  + war OR resourceBase                                          -->
  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  <Set name="contextPath">/</Set>
  
  <Set name="defaultsDescriptor"><SystemProperty name="jetty.home" default="."/>/etc/webdefault.xml</Set>
  <Set name="overrideDescriptor"><SystemProperty name="jetty.home" default="."/>/contexts/test.d/override-web.xml</Set>

  <!-- virtual hosts
  <Set name="virtualHosts">
    <Array type="String">
      <Item>www.myVirtualDomain.com</Item>
      <Item>localhost</Item>
      <Item>127.0.0.1</Item>
    </Array>
  </Set>
  -->

  <!-- disable cookies 
  <Get name="sessionHandler">
     <Get name="sessionManager">
        <Set name="usingCookies" type="boolean">false</Set>
     </Get>
  </Get>
  -->

  <Get name="securityHandler">
    <Set name="loginService">
      <New class="org.eclipse.jetty.security.HashLoginService">
        <Set name="name">Test Realm</Set>
        <Set name="config"><SystemProperty name="jetty.home" default="."/>/etc/realm.properties</Set>
            <!-- To enable reload of realm when properties change, uncomment the following lines -->
            <!-- changing refreshInterval (in seconds) as desired                                -->
            <!-- 
            <Set name="refreshInterval">5</Set>
            <Call name="start"></Call>
            -->
      </New>
    </Set>
    <Set name="checkWelcomeFiles">true</Set>
  </Get>
  
  <!-- Non standard error page mapping -->
  <!--
  <Get name="errorHandler">
    <Call name="addErrorPage">
      <Arg type="int">500</Arg>
      <Arg type="int">599</Arg>
      <Arg type="String">/dump/errorCodeRangeMapping</Arg>
    </Call>
  </Get>
  -->

  <!-- Add context specific logger
  <Set name="handler">
    <New id="RequestLog" class="org.eclipse.jetty.server.handler.RequestLogHandler">
      <Set name="requestLog">
    <New id="RequestLogImpl" class="org.eclipse.jetty.server.NCSARequestLog">
      <Set name="filename"><Property name="jetty.logs" default="./logs"/>/test-yyyy_mm_dd.request.log</Set>
      <Set name="filenameDateFormat">yyyy_MM_dd</Set>
      <Set name="append">true</Set>
      <Set name="LogTimeZone">GMT</Set>
    </New>
      </Set>
    </New>
  </Set>
  -->

</Configure>

Salin selepas log masuk

步骤六：