WebSocket 示例
websocket应运而生
在WebSocket规范提出之前，开发人员若要实现带有即时通信、实时数据、订阅推送等功能的应用实时性较强的功能，经常会使用的解决方法是 Comet。
Comet是一种服务器向页面推送数据的技术。 有两种实现 Comet 的方式： 长轮询和流。长轮询是传统轮询（也称为短轮询）的一个翻版，即浏览
器定时向服务器发送请求，看有没有更新的数据。图 1 展示的是短轮询的时间线。
图1
长轮询把短轮询颠倒了一下。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到
有数据可发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求。这一过程在页
面打开期间一直持续不断。图 2 展示了长轮询的时间线。
图2
无论是短轮询还是长轮询，浏览器都要在接收数据之前，先发起对服务器的连接。两者最大的区别在于服务器如何发送数据。
短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。
轮询的优势是所有浏览器都支持，因为使用 XHR 对象和 setTimeout()就能实现。而你要做的就是决定什么时候发送请求。
第二种流行的 Comet 实现是 HTTP 流。流不同于上述两种轮询，因为它在页面的整个生命周期内只
使用一个 HTTP 连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周
期性地向浏览器发送数据。
这两种技术都是基于请求-应答模式，都不算是真正意义上的实时技术；它们的每一次请求、应答，都浪费了一定流量在相同的头部信息上，并且开发复杂度也较大。
伴随着HTML5推出的WebSocket，真正实现了Web的实时通信，Web Sockets 的目标是在一个单独的持久连接上提供全双工、双向通信。在 JavaScript 中创建了 Web Socket 之后，会有一个 HTTP 请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用 HTTP 升级从 HTTP 协议交换为 Web
Socket 协议。也就是说，使用标准的 HTTP 服务器无法实现 Web Sockets，只有支持这种协议的专门服
务器才能正常工作。
websocket 示例
客户端（Web主页）代码：
1 <%@ page language="java" pageEncoding="UTF-8" %>
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <title>Java后端WebSocket的Tomcat实现</title>
6 </head>
7 <body>
8 Welcome<br/><input id="text" type="text"/>
9 <button onclick="send()">发送消息</button>
10 <hr/>
11 <button onclick="closeWebSocket()">关闭WebSocket连接</button>
12 <hr/>
13 <div id="message"></div>
14 </body>
15
16 <script type="text/javascript">
17 var websocket = null;
18 //判断当前浏览器是否支持WebSocket
19 if ('WebSocket' in window) {
20 websocket = new WebSocket("ws://localhost:8080/websocket");
21 }
22 else {
23 alert('当前浏览器 Not support websocket')
24 }
25
26 //连接发生错误的回调方法
27 websocket.onerror = function () {
28 setMessageInnerHTML("WebSocket连接发生错误");
29 };
30
31 //连接成功建立的回调方法
32 websocket.onopen = function () {
33 setMessageInnerHTML("WebSocket连接成功");
34 }
35
36 //接收到消息的回调方法
37 websocket.onmessage = function (event) {
38 setMessageInnerHTML(event.data);
39 }
40
41 //连接关闭的回调方法
42 websocket.onclose = function () {
43 setMessageInnerHTML("WebSocket连接关闭");
44 }
45
46 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
47 window.onbeforeunload = function () {
48 closeWebSocket();
49 }
50
51 //将消息显示在网页上
52 function setMessageInnerHTML(innerHTML) {
53 document.getElementById('message').innerHTML += innerHTML + '<br/>';
54 }
55
56 //关闭WebSocket连接
57 function closeWebSocket() {
58 websocket.close();
59 }
60
61 //发送消息
62 function send() {
63 var message = document.getElementById('text').value;
64 websocket.send(message);
65 }
66 </script>
67 </html>
Java Web后端代码
1 package me.gacl.websocket;
2
3 import java.io.IOException;
4 import java.util.concurrent.CopyOnWriteArraySet;
5
6 import javax.websocket.*;
7 import javax.websocket.server.ServerEndpoint;
8
9 /**
10 * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
11 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
12 */
13 @ServerEndpoint("/websocket")
14 public class WebSocketTest {
15 //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
16 private static int onlineCount = 0;
17
18 //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
19 private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
20
21 //与某个客户端的连接会话，需要通过它来给客户端发送数据
22 private Session session;
23
24 /**
25 * 连接建立成功调用的方法
26 * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
27 */
28 @OnOpen
29 public void onOpen(Session session){
30 this.session = session;
31 webSocketSet.add(this); //加入set中
32 addOnlineCount(); //在线数加1
33 System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
34 }
35
36 /**
37 * 连接关闭调用的方法
38 */
39 @OnClose
40 public void onClose(){
41 webSocketSet.remove(this); //从set中删除
42 subOnlineCount(); //在线数减1
43 System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
44 }
45
46 /**
47 * 收到客户端消息后调用的方法
48 * @param message 客户端发送过来的消息
49 * @param session 可选的参数
50 */
51 @OnMessage
52 public void onMessage(String message, Session session) {
53 System.out.println("来自客户端的消息:" + message);
54 //群发消息
55 for(WebSocketTest item: webSocketSet){
56 try {
57 item.sendMessage(message);
58 } catch (IOException e) {
59 e.printStackTrace();
60 continue;
61 }
62 }
63 }
64
65 /**
66 * 发生错误时调用
67 * @param session
68 * @param error
69 */
70 @OnError
71 public void onError(Session session, Throwable error){
72 System.out.println("发生错误");
73 error.printStackTrace();
74 }
75
76 /**
77 * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
78 * @param message
79 * @throws IOException
80 */
81 public void sendMessage(String message) throws IOException{
82 this.session.getBasicRemote().sendText(message);
83 //this.session.getAsyncRemote().sendText(message);
84 }
85
86 public static synchronized int getOnlineCount() {
87 return onlineCount;
88 }
89
90 public static synchronized void addOnlineCount() {
91 WebSocketTest.onlineCount++;
92 }
93
94 public static synchronized void subOnlineCount() {
95 WebSocketTest.onlineCount--;
96 }
97 }
运行效果
参考博客来源：http://www.cnblogs.com/xdp-gacl/p/5193279.html
WebSocket 示例的更多相关文章
- 转:php使用websocket示例详解
原文来自于:http://www.jb51.net/article/48019.htm 这篇文章主要介绍了php使用websocket示例,需要的朋友可以参考下 下面我画了一个图演示 client ...
- springboot+websocket示例
1.新建maven工程 工程结构如下: 完整的pom.xml如下: <?xml version="1.0" encoding="UTF-8"?> & ...
- 基于spring boot 2.x的websocket示例
spring boot 2/spring 5自带了websocket,下面是最基本的示例(包括java服务端.java客户端以及js客户端) 一.pom依赖 <dependencies> ...
- html5 websocket 示例，websocket在线聊天，php websocket实例
WebSocket在线测试工具 http://ws.douqq.com/ 1.连接格式为 ws://IP/域名:端口(示例ws://119.29.3.36:5354) 2.对于内网的测试环境,只需填入 ...
- 基于node的websocket示例
websocket:用语服务器端主动向客户端推送消息 本例基于koa框架编写用例:服务器端需要安装相关模块 koa koa-socket co等 服务器端脚本:(需要安装相关模块 koa koa-so ...
- php使用websocket示例详解
一.php 中处理 websocket WebSocket 连接是由客户端主动发起的,所以一切要从客户端出发.第一步是要解析拿到客户端发过来的 Sec-WebSocket-Key 字符串. 复制代码代 ...
- socket.io的websocket示例
写了一个简单的demo,直接上代码吧.用的时候注意一下版本号,可能 socket.io 的 API 有修改~ 效果图 index.html <!DOCTYPE <!DOCTYPE html ...
- Java EE HTML5 WebSocket 示例
http://www.oschina.net/translate/java-ee-html5-websocket-example?cmp HTML5给Web浏览器带来了全双工TCP连接websocke ...
- javascript 客户端webSocket示例
//html <script> // 初始化一个 WebSocket 对象 var ws = new WebSocket("ws://localhost:9998/echo&qu ...
随机推荐
- VUE之随笔小总结1
VUE 它是一个构建用户界面的JavaScript框架vue指令: 是带有v-前缀的特殊属性,通过属性来操作元素 v-text:在元素当中插入文本 eg:属性值会覆盖自己插入的值 //插入一段文本&l ...
- 迈向c++的一次尝试
从C到C++说着容易做起来也不难,今天做一下尝试. ★:题目介绍:今天是一次尝试所以先从简单的题开始. ★:试题分析:由题可了解到本题目的是要做到由一个数字到一个字符串的转变. 题目简单是由于它只是让 ...
- WPF DataTrigger数据触发器
1.通过绑定的属性值变化,动态改变界面的显示,比如绑定了IsExpanded,当为true,grid高度变成600,反之,grid高度变成320. <Grid.Style> <Sty ...
- 如何查看sublime安装了哪些插件
你应该安装过package control. 那么只要这样:按ctrl+shift+p,输入package,选择list packages,就看到了. 或者直接查看Installed Packages ...
- jQuery.fn的作用是什么
jQuery.fn的作用是什么:在自定义jQuery插件中,会经常见到jQuery.fn的身影,下面就简单介绍一下它的作用到底是什么.想要认识它的本质,最好的办法直接看jQuery的源码,否则一切都是 ...
- Linux系统shell编程自学_第一章基础
第一章 基础shell的优势在于处理操作系统底层的业务,Python,php的优势在于开发运维工具,web界面的管理工具以及web业务开发.处理一键安装.优化.报警脚本shell又叫命令解释器,它能识 ...
- 通过Azure Powershell获取asm及arm虚拟机的配置信息
1.asm虚拟机可以使用类似如下Azure Powershell命令获取虚拟机的基本信息,包括发行版本,虚拟机名称及size[备注:虚拟机需要是使用平台image创建的] PS C:\Users\he ...
- JavaScript数组的22种方法
原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法 前面的话 数组总共有22种方法,本文将其分为对象继 ...
- MS SQL 模仿ORACLE的DESC
前言: 在ORACLE数据库的SQL*PLUS里面有个DES(DESCRIBE)命令,它可以返回数据库所存储对象的描述,如下所示 SQL> DESC STUDENT_SCORE Name T ...
- android onSaveInstanceState应用实例
//activity销毁之前调用,把状态值存储上 @Override protected void onSaveInstanceState(Bundle outState) { outState.pu ...