最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

html5WebSocket在jetty7中实现的代码分享

来源:动视网 责编:小采 时间:2020-11-27 15:10:08
文档

html5WebSocket在jetty7中实现的代码分享

html5WebSocket在jetty7中实现的代码分享:一、WebSocket简介 对于一些对数据实时性要求较高的系统,比如股票行情、在线聊天、微博,实现数据的实时推送是必须的。通常实现实时推送的方式有: 1、轮询:隔一段时间发送数据(如:webqq) 2、socket:以往普通的网页是不支持socket接收消息的。可以通
推荐度:
导读html5WebSocket在jetty7中实现的代码分享:一、WebSocket简介 对于一些对数据实时性要求较高的系统,比如股票行情、在线聊天、微博,实现数据的实时推送是必须的。通常实现实时推送的方式有: 1、轮询:隔一段时间发送数据(如:webqq) 2、socket:以往普通的网页是不支持socket接收消息的。可以通
 一、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 = -72719281366784056L;
 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);
 messageBox.appendChild(lineBreak);
 messageBox.scrollTop = messageBox.scrollHeight
 - messageBox.clientHeight;
 }
 },

 _onclose : function(m) {
 this._ws =null;
 }
 };
 </script>
 <style type='text/css'>
 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='messageBox'></div>
 <div id='input'>
 <div>
 <input id='connect' type='submit' name='Connect'
 value='Connect' />
 </div>
 </div>
 <script type='text/javascript'>
 $('connect').onclick =function(event) {
 server.connect();
 returnfalse;
 };
 </script>

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

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>

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>

步骤六:

跑后的效果:

浏览器访问:localhost:8080

eclipse控制台上:

恭喜你,到这儿就算success了!

三、性能

对于这种类型的连接,各种服务器需要消耗的性能也不同,java下可以通过JDK的bin目录下的Jconsole来查看,单个连接内存消耗在2.5M左右,但是对于并发量还没有做测试。这里不贴图了

文档

html5WebSocket在jetty7中实现的代码分享

html5WebSocket在jetty7中实现的代码分享:一、WebSocket简介 对于一些对数据实时性要求较高的系统,比如股票行情、在线聊天、微博,实现数据的实时推送是必须的。通常实现实时推送的方式有: 1、轮询:隔一段时间发送数据(如:webqq) 2、socket:以往普通的网页是不支持socket接收消息的。可以通
推荐度:
标签: 代码 html5 html
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top