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

倘若使用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. Java基础之String,StringBuilder,StringBuffer

    在创建字符串的时候总是习惯性的使用String str = "...";,str = str+"abcd";也有听说过StringBuffer,StringBu ...

  2. Quartus中例化工程

    一般的例化工程,需要将要例化的对象的硬件语言放入到当前工程中,比如A要例化B,需要将B的编程文件加入当前工程进来. 还有一种方法不用这么麻烦,A工程用要例化B时,在library添加B的工程路径,就可 ...

  3. [回顾]SVE回顾

    SVE回顾 写完后的自评:书写太过凌乱,基本无法阅读. 前几日,SVE通过了TR5,虽说是一个小得不能再小的项目,即使到最后也存在一些未能解决的问题,但在用户的通融下还是在超期一段时间后写下了一个暂时 ...

  4. hdu 4432 Sum of divisors(十进制转其他进制)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4432 代码: #include<cstdio> #include<cstring&g ...

  5. VM虚拟机下在LINUX上安装ORACLE 11G单实例数据库

    1.环境及安装前规划:虚拟机及OS如下 环境:VMware Wordstation ACE版 6.0.2 操作系统:OracleLinux-R5-U8-Server-i386-dvd    3.2G ...

  6. C#和java和android中的NetWorkAdapter,httpRequest,WebView,json,xml

    原文地址:http://blog.csdn.net/intbird C#NetWorkAdapter 20121011.======================================== ...

  7. ssl https服务 需要 php5.3以上

    php 5.2 升级 5.3 http://wdlinux.cn/bbs/viewthread.php?tid=37512&highlight=5.3 默认的升级不支持 pdo 升级前编辑升级 ...

  8. android 37 线程通信Looper

    安卓程序的主线程也叫UI线程. 工作线程和主线程的差别:安卓主线程已经调用了Looper.prepare()方法了,已经有一个MessageQueue对象了,所以才可以在工作线程用Handler发消息 ...

  9. 在GDB 中如何记录 instruction-history and function-call-history

    (EDIT: per the first answer below the current "trick" seems to be using an Atom processor. ...

  10. perf---LINUX内核研究

    http://blog.chinaunix.net/uid-10540984-id-3854969.html http://blog.csdn.net/bluebeach/article/detail ...