天天看点

Netty-WebSocket长连接推送服务

转自:http://blog.csdn.net/sinosoft_fesco_12138/article/details/50380256

November 25, 2015

推送服务 推送服务

几种消息推送技术比较

AJAX轮询 轮询:缺点,糟糕的用户体验;对服务器压力很大,并造成带宽的极大浪费。

Comet:长连接机制,同样由浏览器端主动发起,但Server端以一种很慢的方式给出回应,优点是实时性好,缺点,长时间占用链接,丧失了无状态高并发的缺 点

Flash XML Socket,需客户端安装java虚拟机,Chrome浏览器新版本已经默认屏蔽Flash

DWR开源框架,将java代码转为js文件,引入js文件路径不能更改,原理也是轮询,

WebSocket,HTML5定义,不支持html5的可以使用socket.io,高效节能,简单易用,配合netty可以达到百万级的链接推送。

NIO,java1.4版本,非阻塞IO

netty,基于原生NIO实现的高并发框架,配合websocket实现消息推送,netty会单独开一个websocket端口处理请求,并不会占用中间件的连接数,而且一 个线程可以处理几万个链接 

NIO是什么 

NIO 是New IO 的简称,在jdk1.4 里提供的新api 。Sun 官方标榜的特性如下:

为所有的原始类型提供 为所有的原始类型提供(Buffer)缓存支持 缓存支持。字符集编码解码解决方案。

Channel :一个新的原始I/O 抽象。 支持锁和内存映射文件的文件访问接口。 提供多路(non-bloking) 非阻塞式的高伸缩性网络I/O 。

Channel 通道、Buffer 缓冲区、Selector 选择器

其中Channel对应以前的流 对应以前的流,Buffer不是什么新东西,Selector是因为nio可以使用异步的非堵塞模式才加入的东西。以前的流总是堵塞的,一个线程只要 对它进行操作,其它操作就会被堵塞,也就相当于水管没有阀门,你伸手接水的时候,不管水到了没有,你就都只能耗在接水(流)上。nio的Channel的加 入,相当于增加了水龙头(有阀门),虽然一个时刻也只能接一个水管的水,但依赖轮换策略,在水量不大的时候,各个水管里流出来的水,都可以得到妥善接 纳,这个关键之处就是增加了一个接水工,也就是Selector,他负责协调,也就是看哪根水管有水了的话,在当前水管的水接到一定程度的时候,就切换一 下:临时关上当前水龙头,试着打开另一个水龙头(看看有没有水)。当其他人需要用水的时候,不是直接去接水,而是事前提了一个水桶给接水工,这个水桶 就是Buffer。也就是,其他人虽然也可能要等,但不会在现场等,而是回家等,可以做其它事去,水接满了,接水工会通知他们  Java NIO 实现百万连接( 这 段 代 码 只 会 接 受 连 过 来 的 连 接 , 不 做 任 何 操 作 ) 

[java]  view plain  copy

  1. ServerSocketChannel ssc = ServerSocketChannel.open();  
  2. Selector sel = Selector.open();   
  3. ssc.configureBlocking(false);  
  4. ssc.socket().bind(new InetSocketAddress(8080));  
  5. SelectionKey key = ssc.register(sel, SelectionKey.OP_ACCEPT);   
  6. while(true) {  
  7.     sel.select();  
  8.     Iterator it = sel.selectedKeys().iterator();  
  9.     while(it.hasNext()) {  
  10.         SelectionKey skey = (SelectionKey)it.next();  
  11.         it.remove();  
  12.         if(skey.isAcceptable()) {  
  13.             ch = ssc.accept();  
  14.         }  
  15.     }  
  16. }  

 Netty是什么

Netty: http://netty.io/ Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients 

官方解释已经够清楚的了,其中最吸引人的就是高性能 高性能了。

 1,普通的服务器10000个连接需要10000个线程,服务器可能就直接卡住了,但对于netty服务器可能几个线程就够了

2,netty是一套在 是一套在java NIO的基础上封装的便于用户开发网络应用程序的 的基础上封装的便于用户开发网络应用程序的api. 应用场景很多,诸如阿里的消息队列(RocketMQ),分布式rpc(Dubbo)通 信层都使用到了netty(dubbo可以用服务发现自由选择通信层)

3,netty是非阻塞事件驱动框架 是非阻塞事件驱动框架, 并结合线程组(group)的概念,可以很好的支持高并发,慢连接的场景

4,编程接口非常容易,并且也较好的解决了TCP粘包/拆包的问题.netty提供了自己的ByteBuf和channel,相比于jdk的ByteBuffer和channel来说更简便灵 活操作, 并提供了pipeline的概念,并针对每个contextHandler都可以由用户定义, 方便直接.

5,有一些web框架已经开始直接使用netty做为底层通信服务,诸如play. 这样play就不用依赖于容器去进行部署,在没有nginx做反向代理的情况下也能支持 高并发.编解码器可以随意扩展,今天是个web,明天就可以是一个ftp或email服务器,个人觉得比较灵活。

6,相对于Tomcat这种Web Server(顾名思义主要是提供Web协议相关的服务的),Netty是一个 是一个Network Server,是处于Web Server更下层的网络框 架,也就是说你可以使用Netty模仿Tomcat做一个提供HTTP服务的Web容器。简而言之,Netty通过使用NIO的很多新特性,对TCP/UDP编程进行了简化和封 装,提供了更容易使用的网络编程接口,让你可以根据自己的需要封装独特的HTTP Server活着FTP Server等.

Netty更多的链接 更多的链接

非阻塞IO

其实无论是用Java NIO 还是用Netty,达到百万链接都没有任何难度,因为他们都是非阻塞的IO,不需要为每个链接创建一个线程了。

预知详情,可以搜索一下BIO,NIO,AIO的相关知识。

Netty 实现百万连接( 这 段 代 码 只 会 接 受 连 过 来 的 连 接 ) 

[java]  view plain  copy

  1. NioEventLoopGroup bossGroup =  new NioEventLoopGroup();  
  2. NioEventLoopGroup workerGroup= new NioEventLoopGroup();  
  3. ServerBootstrap bootstrap = new ServerBootstrap();  
  4. bootstrap.group(bossGroup, workerGroup);   
  5. bootstrap.channel( NioServerSocketChannel.class);   
  6. bootstrap.childHandler(new ChannelInitializer<SocketChannel>() {  
  7.     @Override protected void initChannel(SocketChannel ch) throws Exception {  
  8.         ChannelPipeline pipeline = ch.pipeline();  
  9.         //todo: add handler  
  10.     }});  
  11. bootstrap.bind(8080).sync();   

WebSocket是什么

WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)

首先,Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。简单的举个例子吧,用目前应用比较广泛的PHP生命周期来解释。

1) HTTP的生命周期通过Request来界定,也就是一个Request 一个Response,那么在HTTP1.0中,这次HTTP请求就结束了。在HTTP1.1中进行了改进,使 得有一个keep-alive,也就是说,在一个HTTP连接中,可以发送多个Request,接收多个Response。但是请记住 Request = Response , 在HTTP中永 远是这样,也就是说一个request只能有一个response。而且这个response也是被动的,不能主动发起。

Websocket的作用 在讲Websocket之前,我就顺带着讲下 long poll 和 ajax轮询 的原理。 

首先是 ajax轮询 ,ajax轮询 的原理非常简单,让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。 

场景再现: 客户端:啦啦啦,有没有新信息(Request) 

服务端:没有(Response) 

客户端:啦啦啦,有没有新信息(Request) 

服务端:没有。。(Response) 

客户端:啦啦啦,有没有新信息(Request) 

服务端:你好烦啊,没有啊。。(Response)

 客户端:啦啦啦,有没有新消息(Request) 

服务端:好啦好啦,有啦给你。(Response) 

客户端:啦啦啦,有没有新消息(Request) 

服务端:。。。。。没。。。。没。。。没有(Response) ---- loop

long poll long poll 其实原理跟 ajax轮询 差不多,都是采用轮询的方式,不过采取的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起连接 后,如果没消息,就一直不返回Response给客户端。直到有消息才返回,返回完之后,客户端再次建立连接,周而复始。 

场景再现 客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request) 

服务端:额。。 等待到有消息的时候。。来 给你(Response) 

客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request) -loop

从上面可以看出其实这两种方式,都是在不断地建立HTTP连接,然后等待服务端处理,可以体现HTTP协议的另外一个特点,被动性。 何为被动性呢,其实就是,服务端不能主动联系客户端,只能有客户端发起。 简单地说就是,服务器是一个很懒的冰箱(这是个梗)(不会、不能主动发起连接),但是上司有命令,如果有客户来,不管多么累都要好好接待。

说完这个,我们再来说一说上面的缺陷 从上面很容易看出来,不管怎么样,上面这两种都是非常消耗资源的。 

ajax轮询 需要服务器有很快的处理速度和资源。(速度) long poll 需要有很高的并发,也就是说同时接待客户的能力。(场地大小) 所以ajax轮询 和long poll 都有可能发生这种情况。

客户端:啦啦啦啦,有新信息么? 

客户端:啦啦啦啦,有新信息么? 

服务端:月线正忙,请稍后再试( 服务端:月线正忙,请稍后再试(503 Server Unavailable) ) 

客户端:。。。。好吧,啦啦啦,有新信息么? 

客户端:。。。。好吧,啦啦啦,有新信息么? 

服务端:月线正忙,请稍后再试( 服务端:月线正忙,请稍后再试(503 Server Unavailable) )

通过上面这个例子,我们可以看出,这两种方式都不是最好的方式,需要很多资源。 一种需要更快的速度,一种需要更多的'电话'。这两种都会导致'电话'的需求越来越高。 哦对了,忘记说了HTTP还是一个状态协议。 通俗的说就是,服务器因为每天要接待太多客户了,是个健忘鬼 健忘鬼,你一挂电话,他就把你的东西全忘光了,把你的东西全丢掉了。你第二次还得再告诉服务 器一遍。

所以在这种情况下出现了,Websocket出现了。 他解决了HTTP的这几个难题。 首先,被动性 被动性,当服务器完成协议升级后(HTTP->Websocket),服务端就可以主动推送信息给客户端啦。 所以上面的情景可以做如下修改。 

客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:17(HTTP Request) 

服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched) 

客户端:麻烦你有信息的时候推送给我噢。。 

服务端:ok,有的时候会告诉你的。 

服务端:balabalabalabala 

服务端:balabalabalabala 

服务端:哈哈哈哈哈啊哈哈哈哈 

服务端:笑死我了哈哈哈哈哈哈哈 

浏览器打开 浏览器打开websocket代码 代码

[javascript]  view plain  copy

  1. var socket;  
  2. if(!window.WebSocket){  
  3.   window.WebSocket = window.MozWebSocket;  
  4. }   
  5. if(window.WebSocket){  
  6.   socket = new WebSocket("ws://10.0.53.219:7397/websocket");  
  7.   socket.onmessage = function(event){  
  8.                    var ta = document.getElementById('responseText');  
  9.                    ta.value += event.data+"\r\n";  
  10.   };  
  11.   socket.onopen = function(event){  
  12.                    var ta = document.getElementById('responseText');  
  13.                    ta.value = "这里显示服务器推送信息"+"\r\n";  
  14.   };  
  15. socket.onclose = function(event){  
  16.                    var ta = document.getElementById('responseText');  
  17.                    ta.value = "";  
  18.                    ta.value = "WebSocket 关闭"+"\r\n";  
  19.   };  
  20. }else{  
  21.          alert("您的浏览器不支持WebSocket协议!");  
  22. }   

不支持websocket的浏览器处理方法

点击打开链接 https://github.com/gimite/web-socket-js/

复制 swfobject.js, web_socket.js, WebSocketMain.swf到项目中

[javascript]  view plain  copy

  1. <span style="font-size:10px;"><script type="text/javascript" src="swfobject.js"></script>  
  2. <script type="text/javascript" src="web_socket.js"></script>  
  3. <script type="text/javascript">  
  4.   // Let the library know where WebSocketMain.swf is:  
  5.   WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";  
  6.   // Write your code in the same way as for native WebSocket:  
  7.   var ws = new WebSocket("ws://example.com:10081/");  
  8.   ws.onopen = function() {  
  9.     ws.send("Hello");  // Sends a message.  
  10.   };  
  11.   ws.onmessage = function(e) {  
  12.     // Receives a message.  
  13.     alert(e.data);  
  14.   };  
  15.   ws.onclose = function() {  
  16.     alert("closed");  
  17.   };  
  18. </script></span>  

附录: 附录:netty+websocket即时聊天代码 即时聊天代码

Global.java

[java]  view plain  copy

  1. package com.fesco.netty.websocket.common;   
  2. import io.netty.channel.group.ChannelGroup;  
  3. import io.netty.channel.group.DefaultChannelGroup;  
  4. import io.netty.util.concurrent.GlobalEventExecutor;  
  5. public final class Global {  
  6.          public static ChannelGroup group = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);  
  7. }   
  8. ChildChannelHandler.java   
  9. package com.fesco.netty.websocket;   
  10. import io.netty.channel.ChannelInitializer;  
  11. import io.netty.channel.socket.SocketChannel;  
  12. import io.netty.handler.codec.http.HttpObjectAggregator;  
  13. import io.netty.handler.codec.http.HttpServerCodec;  
  14. import io.netty.handler.stream.ChunkedWriteHandler;   
  15. public class ChildChannelHandler extends ChannelInitializer<SocketChannel> {   
  16.          @Override  
  17.          protected void initChannel(SocketChannel ch) throws Exception {  
  18.                    ch.pipeline().addLast("http-codec", new HttpServerCodec());  
  19.                    ch.pipeline().addLast("aggregator",new HttpObjectAggregator(65535));  
  20.                    ch.pipeline().addLast("http-chunked",new ChunkedWriteHandler());  
  21.                    ch.pipeline().addLast("handler",new MyWebSocketServerHandler());  
  22.          }   
  23. }     
  24. MyWebSocketServerHandler.java   
  25. package com.fesco.netty.websocket;   
  26. import io.netty.buffer.ByteBuf;  
  27. import io.netty.buffer.Unpooled;  
  28. import io.netty.channel.ChannelFuture;  
  29. import io.netty.channel.ChannelFutureListener;  
  30. import io.netty.channel.ChannelHandlerContext;  
  31. import io.netty.channel.SimpleChannelInboundHandler;  
  32. import io.netty.handler.codec.http.DefaultFullHttpResponse;  
  33. import io.netty.handler.codec.http.FullHttpRequest;  
  34. import io.netty.handler.codec.http.HttpResponseStatus;  
  35. import io.netty.handler.codec.http.HttpVersion;  
  36. import io.netty.handler.codec.http.websocketx.CloseWebSocketFrame;  
  37. import io.netty.handler.codec.http.websocketx.PingWebSocketFrame;  
  38. import io.netty.handler.codec.http.websocketx.PongWebSocketFrame;  
  39. import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;  
  40. import io.netty.handler.codec.http.websocketx.WebSocketFrame;  
  41. import io.netty.handler.codec.http.websocketx.WebSocketServerHandshaker;  
  42. import io.netty.handler.codec.http.websocketx.WebSocketServerHandshakerFactory;  
  43. import io.netty.util.CharsetUtil;   
  44. import java.util.Calendar;  
  45. import java.util.GregorianCalendar;  
  46. import java.util.logging.Level;  
  47. import java.util.logging.Logger;   
  48. import com.fesco.netty.websocket.common.Global;   
  49. public class MyWebSocketServerHandler extends SimpleChannelInboundHandler<Object>{   
  50.          private static final Logger logger = Logger.getLogger(WebSocketServerHandshaker.class.getName());  
  51.          private WebSocketServerHandshaker handshaker;  
  52.          @Override  
  53.          public void channelActive(ChannelHandlerContext ctx) throws Exception {  
  54.                    Global.group.add(ctx.channel());  
  55.                    System.out.println("客户端与服务器段开启");  
  56.          }   
  57.          @Override  
  58.          public void channelInactive(ChannelHandlerContext ctx) throws Exception {  
  59.                    Global.group.remove(ctx.channel());  
  60.                    System.out.println("客户端与服务器链接关闭!");  
  61.          }   
  62.          @Override  
  63.          protected void messageReceived(ChannelHandlerContext ctx, Object msg)  
  64.                             throws Exception {  
  65.                    if(msg instanceof FullHttpRequest){  
  66.                             handleHttpRequest(ctx, ((FullHttpRequest) msg));  
  67.                    }else if(msg instanceof WebSocketFrame){  
  68.                             handlerWebSocketFrame(ctx, (WebSocketFrame) msg);  
  69.                    }  
  70.          }   
  71.          @Override  
  72.          public void channelReadComplete(ChannelHandlerContext ctx) throws Exception {  
  73.                    ctx.flush();  
  74.          }   
  75.          private void handlerWebSocketFrame(ChannelHandlerContext ctx,  
  76.                             WebSocketFrame frame) {  
  77.                    if(frame instanceof CloseWebSocketFrame){  
  78.                             handshaker.close(ctx.channel(), (CloseWebSocketFrame)frame.retain());  
  79.                    }  
  80.                    if(frame instanceof PingWebSocketFrame){  
  81.                             ctx.channel().write(new PongWebSocketFrame(frame.content().retain()));  
  82.                    }  
  83.                    if(!(frame instanceof TextWebSocketFrame)){  
  84.                             System.err.println("本例仅支持文本!");  
  85.                             throw new UnsupportedOperationException(String.format(  
  86.                                                "%s frame types not supported", frame.getClass().getName()));  
  87.                    }  
  88.                    String request = ((TextWebSocketFrame)frame).text();  
  89.                    System.out.println("服务器收到:" + request);  
  90.                    if (logger.isLoggable(Level.FINE)) {  
  91.                             logger.fine(String.format("%s received %s", ctx.channel(),request));  
  92.                    }  
  93.                    TextWebSocketFrame tws = new TextWebSocketFrame(getDateTime()  
  94.                                      + "(" +ctx.channel().remoteAddress() + ") :" + request);  
  95.                    // 群发  
  96.                    Global.group.writeAndFlush(tws);  
  97.                    // 返回【谁发的发给谁】  
  98.                    // ctx.channel().writeAndFlush(tws);  
  99.          }   
  100.          private void handleHttpRequest(ChannelHandlerContext ctx,FullHttpRequest req) {  
  101.                    if(!req.getDecoderResult().isSuccess() ||  
  102.                                      !("websocket".equals(req.headers().get("Upgrade")))){  
  103.                             sendHttpResponse(ctx, req, new DefaultFullHttpResponse(  
  104.                                                HttpVersion.HTTP_1_1, HttpResponseStatus.BAD_REQUEST));  
  105.                             return;  
  106.                    }  
  107.                    WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory("ws://localhost:7397/websocket", null, false);  
  108.                    handshaker = wsFactory.newHandshaker(req);  
  109.                    if(null == handshaker){  
  110.                             WebSocketServerHandshakerFactory.sendUnsupportedWebSocketVersionResponse(ctx.channel());  
  111.                    }else{  
  112.                             handshaker.handshake(ctx.channel(), req);  
  113.                    }  
  114.          }   
  115.          private void sendHttpResponse(ChannelHandlerContext ctx,  
  116.                             FullHttpRequest req, DefaultFullHttpResponse res) {  
  117.                    if(res.getStatus().code() != 200){  
  118.                             ByteBuf buf = Unpooled.copiedBuffer(res.getStatus().toString(),  
  119.                                                CharsetUtil.UTF_8);  
  120.                             res.content().writeBytes(buf);  
  121.                             buf.release();  
  122.                    }  
  123.                    ChannelFuture future = ctx.channel().writeAndFlush(res);  
  124.                    if (!isKeepAlive(req) || res.getStatus().code() != 200) {  
  125.                             future.addListener(ChannelFutureListener.CLOSE);  
  126.                    }  
  127.          }  
  128.          private static boolean isKeepAlive(FullHttpRequest req){  
  129.                    return false;  
  130.          }  
  131.          @Override  
  132.          public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause)  
  133.                             throws Exception {  
  134.                    cause.printStackTrace();  
  135.                    ctx.close();  
  136.          }    
  137.          private String getDateTime() {  
  138.                    // Calendar calendar = Calendar.getInstance();  
  139.                    Calendar calendar = new GregorianCalendar();  
  140.                    java.util.Date date = new java.util.Date();  
  141.                    calendar.setTime(date);  
  142.                    String sHour = null;  
  143.                    String sMinute = null;  
  144.                    String sSecond = null;  
  145.                    String sYear = null;  
  146.                    String sMonth = null;  
  147.                    String sDay = null;  
  148.                    int year = calendar.get(Calendar.YEAR);  
  149.                    int month = calendar.get(Calendar.MONTH) + 1;  
  150.                    int day = calendar.get(Calendar.DATE);  
  151.                    int hour = calendar.get(Calendar.HOUR_OF_DAY);  
  152.                    int minute = calendar.get(Calendar.MINUTE);  
  153.                    int second = calendar.get(Calendar.SECOND);  
  154.                    int milliSecond = calendar.get(Calendar.MILLISECOND);   
  155.                    sYear = String.valueOf(year);  
  156.                    if (month < 10) {  
  157.                             sMonth = "0" + month;  
  158.                    } else  
  159.                             sMonth = String.valueOf(month);  
  160.                    if (day < 10) {  
  161.                             sDay = "0" + day;  
  162.                    } else  
  163.                             sDay = String.valueOf(day);   
  164.                    if (hour < 10) {  
  165.                             sHour = "0" + hour;  
  166.                    } else {  
  167.                             sHour = String.valueOf(hour);  
  168.                    }   
  169.                    if (minute < 10) {  
  170.                             sMinute = "0" + minute;  
  171.                    } else {  
  172.                             sMinute = String.valueOf(minute);  
  173.                    }   
  174.                    if (second < 10) {  
  175.                             sSecond = "0" + second;  
  176.                    } else {  
  177.                             sSecond = String.valueOf(second);  
  178.                    }   
  179.                    return sYear + "-" + sMonth + "-" + sDay + " " + sHour + ":" + sMinute + ":" + sSecond;  
  180.          }    
  181. }   

NettyServer.java 

[java]  view plain  copy

  1. package com.fesco.netty.websocket;   
  2. import java.net.InetSocketAddress;   
  3. import io.netty.bootstrap.ServerBootstrap;  
  4. import io.netty.channel.Channel;  
  5. import io.netty.channel.EventLoopGroup;  
  6. import io.netty.channel.nio.NioEventLoopGroup;  
  7. import io.netty.channel.socket.nio.NioServerSocketChannel;   
  8. public class NettyServer {  
  9.          public void run(){  
  10.                    EventLoopGroup boosGroup = new NioEventLoopGroup();  
  11.                    EventLoopGroup workGroup = new NioEventLoopGroup();  
  12.                    try {  
  13.                             ServerBootstrap bootstrap = new ServerBootstrap();  
  14.                             bootstrap.group(boosGroup, workGroup);  
  15.                             bootstrap.channel(NioServerSocketChannel.class);  
  16.                             bootstrap.childHandler(new ChildChannelHandler());  
  17.                             System.err.println("服务器开启待客户端链接.....");  
  18.                             Channel ch = bootstrap.bind(new InetSocketAddress("10.0.53.219", 7397)).sync().channel();  
  19.                             ch.closeFuture().sync();  
  20.                    } catch (Exception e) {  
  21.                             e.printStackTrace();  
  22.                    }finally{  
  23.                             boosGroup.shutdownGracefully();  
  24.                             workGroup.shutdownGracefully();  
  25.                    }  
  26.          }  
  27.          public static void main(String[] args){  
  28.                    new NettyServer().run();  
  29.          }  
  30. }   

ClinetHtml.html 

[html]  view plain  copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script type="text/javascript">  
  7.   var socket;  
  8.   if(!window.WebSocket){  
  9.            window.WebSocket = window.MozWebSocket;  
  10.   }   
  11.   if(window.WebSocket){  
  12.            socket = new WebSocket("ws://10.0.53.219:7397/websocket");  
  13.            socket.onmessage = function(event){  
  14.                             var ta = document.getElementById('responseText');  
  15.                             ta.value += event.data+"\r\n";  
  16.            };  
  17.            socket.onopen = function(event){  
  18.                             var ta = document.getElementById('responseText');  
  19.                             ta.value = "这里显示服务器推送信息"+"\r\n";  
  20.            };   
  21.            socket.onclose = function(event){  
  22.                             var ta = document.getElementById('responseText');  
  23.                             ta.value = "";  
  24.                             ta.value = "WebSocket 关闭"+"\r\n";  
  25.            };  
  26.   }else{  
  27.                    alert("您的浏览器不支持WebSocket协议!");  
  28.   }   
  29.   function send(message){  
  30.          if(!window.WebSocket){return;}  
  31.          if(socket.readyState == WebSocket.OPEN){  
  32.                    socket.send(message);  
  33.          }else{  
  34.                    alert("WebSocket 连接没有建立成功!");  
  35.          }  
  36.   }  
  37.   </script>  
  38. </head>   
  39. <body>  
  40.          <form onSubmit="return false;">  
  41.                    <input type="text" name="message" value="这里输入消息" /> <br />  
  42.                    <br /> <input type="button" value="发送 WebSocket 请求消息"  
  43.                             onClick="send(this.form.message.value)" />  
  44.                    <hr color="blue" />  
  45.                    <h3>服务端返回的应答消息</h3>  
  46.                    <textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>  
  47.          </form>  
  48. </body>  
  49. </html>  

继续阅读