WebSocket整合SSM(Spring,Struts2,Maven)的实现示例

一、WebSocket与HTTP长轮询

WebSocket属于HTML5 规范的一部分,提供的一种在单个 TCP 连接上进行全双工通讯的协议。允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。(Tomcat 8以上版本支持)

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。这种通信模型有一个弊端:HTTP 协议无法实现服务器主动向客户端发起消息。

HTTP长轮询:客户端向服务器发送(http)Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

WebSocket与HTTP长轮询的通信机制如下:

二、客户端如何使用WebSocket

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。

1. 创建 WebSocket 对象API

//第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。  

API:var webSocket = new WebSocket(url, [protocol] );

2. WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:

属性 描述
Socket.readyState
只读属性 readyState 表示连接状态,可以是以下值:

  • 0 - 表示连接尚未建立。
  • 1 - 表示连接已建立,可以进行通信。
  • 2 - 表示连接正在进行关闭。
  • 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

3. WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:

事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发

4. WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:

方法 描述
Socket.send()
使用连接发送数据

Socket.close()
关闭连接

5. WebSocket 实例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="../js/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing WebSocket</title>
</head>
<script type="text/javascript">
  var webSocket;
  $(document).ready(function() {
    //var IP = window.location.host;
    var url = "ws://your IP/demo/ws/websocket";
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
      //建立客户端websocket
      webSocket = new WebSocket(url);
    } else {
      console.log("您的浏览器不支持WebSocket");
    }

    //封装内部监听事件
    function init(){
      //连接发生错误的回调方法
      webSocket.onerror = function(event) {
        console.log("webSocket连接发生错误.");
      };

      //连接成功建立的回调方法
      webSocket.onopen = function(event) {
        console.log("webSocket连接成功.");
         //心跳检测重置
        heartCheck.start();
      };

      //接收到消息的回调方法
      webSocket.onmessage = function(event) {
        //拿到任何消息都说明当前连接是正常的
        if(event.data=="&"){
          console.log("收到心跳回复"+event.data);
        }else{
          console.log("接收到消息="+event.data);
          onMessage(event);
        }
        heartCheck.start();
      };

      //连接关闭的回调方法
      // 断线重连
      webSocket.onclose = function() {
        console.log("webSocket连接断开");
      }

      //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
      window.onbeforeunload = function() {
        webSocket.close();
        console.log("窗口关闭,webSocket断开连接.");
      }

    }

    function onMessage(event) {
      setMessageInnerHTML(event.data);
    }   

    function postToServer() {
      webSocket.send(document.getElementById("msg").value);
      console.log("向服务器发送消息="+document.getElementById("msg").value);
      document.getElementById("msg").value = "";
    } 

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
      document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function onClose(){
      webSocket.close();
    }
  });  

  //心跳检测
  var heartCheck = {
   timeout: 10000,
   timeoutObj: null,
   serverTimeoutObj: null,
   start: function(){
    console.log("start heartCheck");
    var self = this;
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    this.timeoutObj = setTimeout(function(){
     //这里发送一个心跳,后端收到后,返回一个心跳消息,
     console.log('发送心跳&');
     webSocket.send("&");
     self.serverTimeoutObj = setTimeout(function() {
      console.log(webSocket);
      console.log("服务器心跳回复超时");
      webSocket.close();
     }, self.timeout);

    }, this.timeout)
   }
  }

</script>

<body>

  <textarea id="message" readonly></textarea>  <br />
  <input id="msg" type="text" />
  <button type="submit" id="sendButton" onClick="postToServer()">Send!</button>
  <button type="submit" id="sendButton" onClick="onClose()">End</button>

<script type="text/javascript" src="../js/webSocket.js"></script>
</body>
</html>

三、服务器端如何使用WebSocket

1. pom.xml文件引入对应的依赖包:

<!-- webSocket 开始-->
    <dependency>
      <groupId>javax.websocket</groupId>
      <artifactId>javax.websocket-api</artifactId>
      <version>1.1</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax</groupId>
      <artifactId>javaee-api</artifactId>
      <version>7.0</version>
      <scope>provided</scope>
    </dependency>
    <!-- webSocket 结束-->

2. spring配置文件配置websocket服务类

 <!-- websocket -->
   <bean id="webSocketService" class="minyuantec.tvwall.service.impl.WebSocketServiceImpl" scope="singleton">
   </bean>

3. struts2配置文件过滤websocket请求

<!-- 过滤掉ws请求 -->
<constant name="struts.action.excludePattern" value="/ws/.*,ws://.*"></constant>

4. 定义Websocket.java类

@ServerEndpoint("/ws/websocket")
public class WebSocket {
  private static Logger logger = Logger.getLogger(WebSocket.class);
  @SuppressWarnings("static-access")
  private MessageHandler messageHandler = getWebSocketService().messageHandler;

  //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的
  public static int onlineCount = 0;

  //与某个客户端的连接会话,需要通过它来给客户端发送数据
  public Session session;

  /**
   * 连接建立成功调用的方法
   * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
   */
  @OnOpen
  public void onOpen(Session session){
    this.session = session;
    WebSocketMapUtil.put(session.getId(),this);//存入map
    addOnlineCount();      //在线数加1
    messageHandler.onConnect(session.getId());
    System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
    logger.info("有新连接加入!当前在线人数为" + getOnlineCount());
  }

  /**
   * 连接关闭调用的方法
   */
  @OnClose
  public void onClose(){
    WebSocketMapUtil.remove(session.getId()); //从map中删除
    subOnlineCount();      //在线数减1
    messageHandler.onDisconnect(session.getId());
    try {
      if(session != null){
        session.close();
      }
    } catch (IOException e) {
      e.printStackTrace();
    }
    System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    logger.info("有一连接关闭!当前在线人数为" + getOnlineCount());
  }

  /**
   * 收到客户端消息后调用的方法
   * @param message 客户端发送过来的消息
   * @param session 可选的参数
   */
  @OnMessage
  public String onMessage(String message, Session session) {
    System.out.println("来自客户端的消息:" + message);
    logger.info("来自客户端的消息:" + message);
    if (message.equals("&")){
      return "&";
    }else{
       messageHandler.onMessage(session.getId(),message);
      return "Got your message ("+ message +")";
    }
  }

  /**
   * 发生错误时调用
   * @param session
   * @param error
   */
  @OnError
  public void onError(Session session, Throwable error){
    System.out.println("发生错误");
    logger.info("发生错误:" + error);
    error.printStackTrace();
  }

  //单发消息
  public void sendMessage(String message) throws IOException{
    //阻塞式(同步)
    //this.session.getBasicRemote().sendText(message);
    //非阻塞式(异步)
    this.session.getAsyncRemote().sendText(message);
  }

  //群发消息
  public void sendMessageAll(String message) throws IOException{
    for(WebSocket webSocket : WebSocketMapUtil.getValues()){
      webSocket.sendMessage(message);
    }
  }

  public static synchronized int getOnlineCount() {
    return onlineCount;
  }

  public static synchronized void addOnlineCount() {
    WebSocket.onlineCount++;
  }

  public static synchronized void subOnlineCount() {
    WebSocket.onlineCount--;
  }

  public WebSocketServiceImpl getWebSocketService(){
    ClassPathXmlApplicationContext classPathXmlApplicationContext = new ClassPathXmlApplicationContext("classpath*:applicationContext.xml");
    return (WebSocketServiceImpl) classPathXmlApplicationContext.getBean("webSocketService");
  }
}

5. 在WebSocketServiceImpl实现类里实现服务器推送消息的方法

@Override
  public boolean sendMessage(String message) {
    logger.info("发送给客户端的websocket消息message=="+message);
    if (messageHandler == null) {
      logger.info("上层调用者没有给messageHandler赋值,websocket消息无法发送到客户端");
      return false;
    }
    if (message == null || "".equals(message)) {
      logger.info("发送给客户端的消息message为空");
      return false;
    }
    try {
      for(WebSocket webSocket : WebSocketMapUtil.getValues()){
        webSocket.sendMessage(message);
        logger.info("给sessionId为" + webSocket.session.getId() + "的客户端发送消息:"+message+"=成功");
      }
      return true;
    } catch (IOException e) {
      logger.info("向所有客户端发送消息:"+message+"=失败:" + e);
      e.printStackTrace();
    }
    return false;
  }

其实,使用Tomcat8开发WebSocket服务端非常简单,主要有如下两种方式:

1. 使用注解方式开发(上述示例代码),被@ServerEndpoint修饰的Java类即可作为WebSocket服务端。

2. 继承Endpint基类实现WebSocket服务端。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WebSocket的简单介绍及应用

    定时刷新的不足与改进 web开发中可能遇到这样的场景:网页里的某一块区域里写了一些内容,但这些内容不是固定的,即使看网页的人没有做任何操作,它们也会随时间不断变化.股票行情.活动或游戏的榜单都是比较常见的例子. 对此,一般的做法是用setTimeout()或setInverval()定时执行任务,任务内容是Ajax访问一次服务器,并在成功拿到返回数据后去更新页面. 这种定时刷新的做法会有这样一些感觉不足的地方: 频繁的定时网络请求对浏览器(客户端)和服务器来说都是一种负担,尤其是当网页里有多个定

  • WebSocket实现数据库更新时前端页面刷新

    本文实例为大家分享了WebSocket实现数据库更新时前端页面刷新,供大家参考,具体内容如下 后台代码: WebSocketConfig: package com.x.common.websocket; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.sock

  • 微信小程序websocket实现即时聊天功能

    今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助. 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道,请求只需要请求一次,而且还可以从通道实时获取服务器数据,非常适合应用到实时应用上. 因为这里本人是分享小程序,所以就不去深究websocket的底层和协议了,感兴趣的朋友可以去看下websocket协议 建议大家在做之前先看看微信小程序官方提供的api关于websocket的文档,因为微

  • 微信小程序使用websocket通讯的demo,含前后端代码,亲测可用

    0.概述websocket (1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它. 一个客户端一打开就去连接websocket地址,同时传递某些识别参数.这样一来后台和客户端连接成功了,然后后台就可以发消息给客户端了,(客户端也可以再回话给后台). (2) socket叫套接字,应用程序用socket向网络发出请求或者应答网络请求. (3) 官方解释的socket 建立连接四步骤: 服务器端开启socket,然后accep方法处于监听状态,等待客户端的连接. 客户端开

  • WebSocket整合SSM(Spring,Struts2,Maven)的实现示例

    一.WebSocket与HTTP长轮询 WebSocket属于HTML5 规范的一部分,提供的一种在单个 TCP 连接上进行全双工通讯的协议.允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.(Tomcat 8以上版本支持) HTTP 协议是一种无状态的.无连接的.单向的应用层协议.它采用了请求/响应模型.通信请求只能由客户端发起,服务端对请求做出应答处理.这种通信模型有一个弊端:HTTP

  • 详解JAVAEE——SSH三大框架整合(spring+struts2+hibernate)

    一.整合原理 二.导包(41个) 1.hibernate (1)hibernate/lib/required (2)hibernate/lib/jpa | java persist api java的持久化规范(接口) (3)数据库驱动 2.struts2 (1)struts-blank.war/WEB-INF/lib/* 注意:javassist-3.18.1-GA.jar包与hibernate中的重复(只保留高版本即可) (2)struts整合spring插件包 注意:这个包一旦导入,那么s

  • 使用SpringBoot整合ssm项目的实例详解

    SpringBoot是什么? Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程. Spring Boot 现在已经成为 Java 开发领域的一颗璀璨明珠,它本身是包容万象的,可以跟各种技术集成.成为 SpringBoot 全家桶,成为一把万能钥匙. SpringBoot的特点 1.创建独立的 Spring 应用程序 2.嵌入的 Tomcat ,无需部署 WAR 文件 3.简化 Maven 配置 4.自动配置 Spr

  • 关于Spring Boot WebSocket整合以及nginx配置详解

    前言 本文主要给大家介绍了关于Spring Boot WebSocket整合及nginx配置的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一:Spring Boot WebSocket整合 创建一个maven项目,加入如下依赖 <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId>

  • 一步步教你整合SSM框架(Spring MVC+Spring+MyBatis)详细教程

    前言 SSM(Spring+SpringMVC+Mybatis)是目前较为主流的企业级架构方案,不知道大家有没有留意,在我们看招聘信息的时候,经常会看到这一点,需要具备SSH框架的技能:而且在大部分教学课堂中,也会把SSH作为最核心的教学内容. 但是,我们在实际应用中发现,SpringMVC可以完全替代Struts,配合注解的方式,编程非常快捷,而且通过restful风格定义url,让地址看起来非常优雅. 另外,MyBatis也可以替换Hibernate,正因为MyBatis的半自动特点,我们程

  • SSM框架整合之Spring+SpringMVC+MyBatis实践步骤

    1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003年兴起的一个轻量级的Java开发框架,由RodJohnson在其著作ExpertOne-On-OneJ2EEDevelopmentandDesign中阐述的部分理念和原型衍生而来.它是为了解决企业应用开发的复杂性而创建的.Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅限于服务器端的开发.从简单性.可测试性和松耦合的角度而言,任何Java应用都可以从Spr

  • Spring整合websocket整合应用示例(下)

    在Spring整合websocket整合应用示例(上)文章中,我们已经实现了websocket,但还有一个核心的业务实现类没有实现,这里我们就实现这个业务核心类,因为老夫参与的这个系统使用websocket发送消息,所以其实现就是如何发送消息了. 7. NewsListenerImpl的实现 package cn.bridgeli.websocket; import com.google.gson.Gson; import com.google.gson.GsonBuilder; import

  • ssm整合之Spring整合MyBatis框架配置事务的详细教程

    ssm整合之Spring整合MyBatis框架配置事务 1.在applicationContext.xml修改代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance

  • java整合SSM框架的图文教程

    使用Myeclipse搭建maven项目 准备工作 安装maven 官网下载安装(http://maven.apache.org/) 配置环境变量 配置完后,使用命令行输入mvn -version查看是否配置成功,出现以下界面表示配置成功. 2. 在MyEclipse中配置maven 打开MyEclipse2015----点击菜单栏Window---选项栏Preference ,搜索Maven,进入Installations,点击Add引入安装的maven. 进入User Setting,设置G

  • IDEA整合SSM框架实现网页上显示数据

    我们来整合SSM框架 第一步. 创建一个maven工程.配置Tomcat,并测试是否正常访问HelloWorld. 这一步就省略了. 不懂得看这个博客: idea创建maven项目 创建出来是这样的: 我们从这里开始整合ssm. 第二步. 在pom.xml导入依赖,以下依赖是ssm常用的一些依赖,都导进去,没有坏处. <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding&g

随机推荐