由于项目需要，前端向后台发起请求后，后台需要分成多个步骤进行相关操作，而且不能确定各步骤完成所需要的时间

倘若使用ajax重复访问后台以获取实时数据，显然不合适，无论是对客户端，还是服务端的资源很是浪费

这种情况下，WebSocket能够解决此问题

它不像普通的http请求或者ajax访问，返回相应的结果就关闭了连接

WebSocket在个人浅薄的知识看来是属于长连接，能保持连接，随时收发数据

所以对WebSocket进行了初步了解，并按照相关的教程尝试做了一个简易demo

首先需要了解的是，WebSocket的几个基本操作

  1. 客户端开启连接
  2. 客户端给服务器发送数据
  3. 服务器接收数据
  4. 服务器给客户端发送数据
  5. 客户端接收数据

其中，服务端和客户端都能监听三类基本事件：

1、onopen（打开连接） 2、onmessage（发送数据） 3、onclose（关闭连接）

本次的demo中使用了tomcat7.0作为服务端，据悉7.0以上的版本才支持WebSocket

首先使用eclipse创建一个web project

在工程根目录下的WEB-INF/lib目录中导入tomcat7.0的lib文件夹中的 tomcat7-websocket.jar 和 websocket-api.jar

然后在src目录下创建第一个类（重点在于继承ServerApplicationConfig）

package cn.test.websocket;

import java.util.Set;

import javax.websocket.Endpoint;

import javax.websocket.server.ServerApplicationConfig;

import javax.websocket.server.ServerEndpointConfig;

public class ApplicationConfig implements ServerApplicationConfig {

    //扫描注解

    @Override

    public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {

        System.out.println("scan WebSocket" + scan.size());

        //返回（起到过滤的作用，可以在返回前把里面部分类进行过滤）

        return scan;

    }

    //实现接口

    @Override

    public Set<ServerEndpointConfig> getEndpointConfigs(

            Set<Class<? extends Endpoint>> arg0) {

        // TODO Auto-generated method stub

        return null;

    }

}

接着创建第二个类，这个类用来处理WebSocket传送过来的数据（重点在于该类有@ServerEndpoint的注解）

package cn.test.websocket;

import javax.websocket.OnClose;
import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

//注解规定了访问的URL

@ServerEndpoint("/echo")

public class EchoSocket {

    /**

     * 客户端有连接的时候就会调用这个方法

     */

    @OnOpen

    public void open(Session session, EndpointConfig config){

        System.out.println(session.getId()+"#############");

    }

    /**

     * 客户端连接断开就会调用此方法

     */

    @OnClose

    public void close(Session session,CloseReason reason){

        System.out.println(session.getId() + "连接关闭了");

    }

    /**

     * 接收到客户端的信息

     * @param msg

     * @param last

     */

    @OnMessage

    public void message(Session session,boolean last,String msg){

        System.out.println("客户端说" + msg);

        try {

            session.getBasicRemote().sendText("ni hao too");

            Thread.sleep(3000);//三秒后再发送一条信息，用于验证是否实现数据实时更新

            session.getBasicRemote().sendText("ni hao too twice");

        } catch (Exception e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

     /**

     *错误监听（当没有关闭socket连接就关闭浏览器会异常）

     */

@OnError
      public void error(Session session, Throwable error){
           String id = session.getId();
           System.out.println("出错的session的id是" + id);
      }

public EchoSocket(){

        System.out.println("Socket对象创建");

        //通过对象的创建可以知道不同socket之间的通信不会共享成员变量

    }

}

本案例中，使用的是基于注解的方法，让ApplicationConfig扫描注解

（实际上还有实现接口实现的方法，同理可以让ApplicationConfig扫描实现接口的类）

后台所需的类已经写好了，接下来就写一个简单的jsp页面

在工程下的index.jsp如下（实际上html也可以）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>WebSocket示例</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="description" content="This is my page">

  </head>

  <body>

      <button onclick="subOpen();">open</button><br/>

      <input type="text" name="msg" id="msg"><br/>

      <button onclick="send();">发送</button>

      <div id="div"></div>

  </body>

  <script type="text/javascript">

      var ws; // 就是一个通信管道

      var target = "ws://127.0.0.1:8080/WebSocket/echo";//服务端的url，注意以ws开头

      function subOpen(){

          //三个判断用于获取ws通信管道（浏览器兼容）

          if('WebSocket' in window){

              ws = new WebSocket(target);

          }else if('MozWebSocket' in window){

              ws = new MozMozWebSocket(target);

          }else{

              alert("WebSocket is not supported by this browse");

              return;

          }

          //ws.onopen = function(){}  链接开启会执行方法

          //ws.onclose = function(){}  断开连接会执行方法

          //以上两个实际用处并不多，主要是下面的

          //服务器又信息返回就执行方法

          ws.onmessage=function(event){

              //服务端一返回内容，就把该内容放到div标签当中

              document.getElementById("div").innerHTML = event.data;

              //方便在控制台查看返回内容的具体信息

              console.info(event);

          };

      };

      function send(){

          //点击发送按钮就把输入框里的内容发送给服务器，并把输入框的内容清空

          var msg = document.getElementById("msg").value;

          ws.send(msg);

          document.getElementById("msg").value = "";

      };

  </script>

</html>

至此，demo已经编写完毕，将工程部署到tomcat7.0，启动tomcat并访问localhost:8080/WebSocket可看到以下简易页面

点击open按钮，发起websocket连接，服务端控制台会输出

Socket对象创建
0#############

在网页输入框输入“你好”后点击“发送”按钮

服务端控制台输出

客户端说你好

网页端先显示"ni hao too"，三秒后，又显示"ni hao too twice"

（三秒钟太短了懒得去截第一个效果的图片的，反正大家都懂的2333）

重复再网页输入信息点击发送后能重复展现同样的效果

显然，WebSocket非常灵活好用

（ps:第一篇随笔です，新人初来乍到，难免会有很多缺漏或者错误的地方，还请前辈们多多指点）

WebSocket基于javaweb+tomcat的简易demo程序的更多相关文章

  1. 基于JavaWeb实现的研究室综合系统

    代码地址如下:http://www.demodashi.com/demo/14641.html 概述 基于JavaWeb实现的研究室综合系统,功能包括研究室成员注册.登陆,后台管理,相册功能,新闻模块 ...

  2. RCF进程间通信Demo程序

    在上一篇文章RPC通信框架--RCF介绍中,介绍了RCF的优点,本篇文章从头开始演示如何用RCF编写一个跨进程通信的Demo程序. 将RCF编译为静态库 从官网下载到的源码中包含一个RCF的项目,但是 ...

  3. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  4. 【原创】NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示

    前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...

  5. 【原创】NIO框架入门(一)：服务端基于Netty4的UDP双向通信Demo演示

    申明:本文由作者基于日常实践整理,希望对初次接触MINA.Netty的人有所启发.如需与作者交流,见文签名,互相学习. 学习交流 更多学习资料:点此进入 推荐 移动端即时通讯交流: 215891622 ...

  6. JavaScript简易缩放程序

    一.前言: 上一篇随笔中已经把拖动程序完成了,这篇主要把缩放程序完成,后面合并后可以做成一个图片裁剪的功能 简易缩放程序DEMO:http://jsfiddle.net/UN99R/ 限制缩放程序DE ...

  7. 网络编程：基于C语言的简易代理服务器实现(proxylab)

    本文记录了一个基于c socket的简易代理服务器的实现.(CS:APP lab 10 proxy lab) 本代理服务器支持keep-alive连接,将访问记录保存在log文件. Github: h ...

  8. Java：基于MD5的文件监听程序

    前述和需求说明 和之前写的 Python:基于MD5的文件监听程序 是同样的功能,就不啰嗦了,就是又写了一个java版本的,可以移步 python 版本去看一下,整个的核心思路是一样的.代码已上传Gi ...

  9. 计算机网络课设之基于UDP协议的简易聊天机器人

    前言:2017年6月份计算机网络的课设任务,在同学的帮助和自学下基本搞懂了,基于UDP协议的基本聊天的实现方法.实现起来很简单,原理也很简单,主要是由于老师必须要求使用C语言来写,所以特别麻烦,而且C ...

随机推荐

  1. Eclipse没法自动补全代码解决

    Eclipse没法自动补全代码解决   Eclipse无法自动补全代码解决 Window->Java->Editor->Content Assist->Advanced

  2. 直接拿来用！最火的android开源项目(一)

    不好意思尊重一下作者咯.详情见:csdn:http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects

  3. Linux学习笔记4——函数调用栈空间的分配与释放

    一.函数执行时使用栈空间作为自己的临时栈,3种方式决定编译器清空栈的方式:__stdcall. __fastcall.__cdecl 1.__stdcall表示每个调用者负责清空自己调用的函数的临时栈 ...

  4. form与action之setter与getter(转)

    对于表单提交数据给action时候,可以简单的用setter与getter函数实现值的传递. 例如在jsp里有这么个form: <s:form action="login"& ...

  5. JS代码获取当前日期时支持IE，不兼容FF和chrome，解决这个问题，我们需要把获取时间的getYear（）函数换成getFullYear（）

    以前在页面中获得当前时间的方法如下: function SelectTodayClient() { var d = new Date(); var taday = d.getYear() + &quo ...

  6. 排序算法c语言描述---堆排序

    排序算法系列学习,主要描述冒泡排序,选择排序,直接插入排序,希尔排序,堆排序,归并排序,快速排序等排序进行分析. 文章规划: 一.通过自己对排序算法本身的理解,对每个方法写个小测试程序.具体思路分析不 ...

  7. poj 2240 Arbitrage （Floyd）

    链接:poj 2240 题意:首先给出N中货币,然后给出了这N种货币之间的兑换的兑换率. 如 USDollar 0.5 BritishPound 表示 :1 USDollar兑换成0.5 Britis ...

  8. Delphi ListView基本用法大全

    //增加项或列(字段) ListView1.Clear; ListView1.Columns.Clear; ListView1.Columns.Add; ListView1.Columns.Add; ...

  9. linux可重入、异步信号安全和线程安全

    一 可重入函数 当一个被捕获的信号被一个进程处理时,进程执行的普通的指令序列会被一个信号处理器暂时地中断.它首先执行该信号处理程序中的指令.如果从信号处理程序返回(例如没有调用exit或longjmp ...

  10. 解决github提交commit,contributions不统计显示绿色的问题

    最近使用GitHub Desktop时,发现自己好多次的commits都没有被记录在Contributions中,但是点开项目详情里面可以看到自己的commit确实上传成功了,所以就忧伤了,为什么没有 ...