• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5 WebSocket在jetty7中实现的代码分享

html5 WebSocket在jetty7中实现的代码分享

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5 ,WebSocket,jetty7等相关知识,匿名希望在学习及工作中可以帮助到您
一、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();

二、一个基于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();
            }
        }
    }
}

test.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>Chat by Web Sockets</title>
        <script type='text/javascript'>
            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('send to server : websockets are open for communications!');
                },

                _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 = $('messageBox');
                        var spanText = document.createElement('span');
                        spanText.className ='text';
                        spanText.innerHTML = m.data;
                        var lineBreak = document.createElement('br');
                        messageBox.appendChild(spanText);
                   
  


 

您可能想查找下面的文章:

  • HTML5的本地存储
  • Define charset for HTML5 Doctype
  • HTML5 canvas如何绘制动态径向渐变
  • 如何使用HTML5 Canvas绘制动态线性渐变
  • HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
  • HTML5 canvas中如何绘制图像
  • 如何使用HTML5 canvas实现图像的马赛克
  • html5 canvas实现简单的双缓冲
  • HTML5 Canvas 图形组合是如何实现的?附代码
  • HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

相关文章

  • 2018-12-03苹果官网设计翻转特效如何实现?
  • 2018-12-03HTML5表单新增元素与属性
  • 2018-12-03HTML5中新标签和常用标签详解_html5教程技巧
  • 2018-12-03使用HMTL5 API监控前端性能
  • 2018-12-03input file上传文件样式支持html5的浏览器解决方案_html5教程技巧
  • 2018-12-03H5图像遮罩
  • 2018-12-03Android使WebView支持HTML5 Video全屏播放的方法分享(图)
  • 2018-12-03HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)
  • 2018-12-03同样一个页面能否同时兼容PC的web浏览器以及移动设备的浏览器?
  • 2018-12-03HTML5/CSS3 经典案例-无插件拖拽上传图片(二)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5的本地存储
    • 如何解决canvas绘图时遇到的跨域问题
    • HTML5 canvas画图的图文代码详解
    • 移动端利用html5对照片处理的教程实例
    • 避免常见的六种HTML5错误用法 (2)
    • HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
    • 实例讲解使用SVG制作loading加载动画的方法_html5教程技巧
    • 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
    • html5-websocket基于远程方法调用的数据交互实现_html5教程技巧
    • 把 HTML5 简称为 H5 的人,会把 CSS3 说成 C3 吗?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有