springboot websocket简单入门示例

之前做的需求都是客户端请求服务器响应,新需求是服务器主动推送信息到客户端.百度之后有流、长轮询、websoket等方式进行.但是目前更加推崇且合理的显然是websocket.

从springboot官网翻译了一些资料,再加上百度简单实现了springboot使用websocekt与客户端的双工通信.

1.首先搭建一个简单的springboot环境

<!-- Inherit defaults from Spring Boot -->
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.4.RELEASE</version>
  </parent>

  <!-- Add typical dependencies for a web application -->
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

2.引入springboot整合websocket依赖

<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
  <version>2.0.4.RELEASE</version>
</dependency>

3.创建启动springboot的核心类

package com;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class GlobalConfig {
  public static void main(String[] args) {
    SpringApplication.run(GlobalConfig.class, args);
  }
}

4.创建websocket服务器

正如springboot 官网推荐的websocket案例,需要实现WebSocketHandler或者继承TextWebSocketHandler/BinaryWebSocketHandler当中的任意一个.

package com.xiaoer.handler;

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.HashMap;
import java.util.Map;

/**
 * 相当于controller的处理器
 */
public class MyHandler extends TextWebSocketHandler {
  @Override
  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    String payload = message.getPayload();
    Map<String, String> map = JSONObject.parseObject(payload, HashMap.class);
    System.out.println("=====接受到的数据"+map);
    session.sendMessage(new TextMessage("服务器返回收到的信息," + payload));
  }
}

5.注册处理器

package com.xiaoer.config;

import com.xiaoer.handler.MyHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(myHandler(), "myHandler/{ID}");
  }
  public WebSocketHandler myHandler() {
    return new MyHandler();
  }

}

6.运行访问

出现如上图是因为不能直接通过http协议访问,需要通过html5的ws://协议进行访问.

7.创建Html5 客户端

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>

      var userID="888";
      var websocket=null;

      $(function(){
        connectWebSocket();
      })

      //建立WebSocket连接
      function connectWebSocket(){

        console.log("开始...");

       //建立webSocket连接
        websocket = new WebSocket("ws://127.0.0.1:8080/myHandler/ID="+userID);

       //打开webSokcet连接时,回调该函数
        websocket.onopen = function () {
          console.log("onpen");
        }

        //关闭webSocket连接时,回调该函数
        websocket.onclose = function () {
        //关闭连接
          console.log("onclose");
        }

        //接收信息
        websocket.onmessage = function (msg) {
          console.log(msg.data);
        }

      }
      //发送消息
      function send(){
        var postValue={};
        postValue.id=userID;
        postValue.message=$("#text").val();
        websocket.send(JSON.stringify(postValue));
      }
      //关闭连接
      function closeWebSocket(){
        if(websocket != null) {
          websocket.close();
        }
      }
    </script>
  </body>
</html>

8.运行

利用客户端运行之后仍然会出现上图中的一连接就中断了websocket连接.

这是因为spring默认不接受跨域访问:

As of Spring Framework 4.1.5, the default behavior for WebSocket and SockJS is to accept only same origin requests.

需要在WebSocketConfig中设置setAllowedOrigins.

package com.xiaoer.config;

import com.xiaoer.handler.MyHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(myHandler(), "myHandler/{ID}")
      .setAllowedOrigins("*");
  }
  public WebSocketHandler myHandler() {
    return new MyHandler();
  }

}

如下图,并未输出中断,说明连接成功.

9.服务器和客户端的相互通信

服务器端收到消息

客户端收到服务器主动推送消息

以上就是一个最基础的springboot简单应用.还可以通过拦截器、重写WebSocketConfigurer中的方法进行更为复杂的属性操作.具体可以参考SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送

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

(0)

相关推荐

  • .NET程序员如何入门Spring Boot详解

    前言 本篇文章将教你作为一个.NET程序员如何快入门Spring Boot.你不需要用Eclipse,也不需要用IDEA.已经习惯了VS,其他的IDE-- 但不得不说VS Code很厉害,一用就喜欢.微软给VS Code提供了编写Java的插件,你可以在VS Code上愉快地写Java. 一.环境搭建 (1) 安装Java.配置环境变量.(教程很多,这里不多说) (2) 安装Maven和配置.参考https://www.cnblogs.com/eagle6688/p/7838224.html (

  • Spring boot学习教程之快速入门篇

    前言 首先来说一下为什么使用 Spring Boot,之前我用的后端 WEB 开发框架一直都是 PlayFramework的 1.2.7 版本(目前已经停止更新), 不得不说这个框架非常好用,但是由于 Play2.x 版本和 Play1.x 版本差别巨大,并且不兼容,所以现在面临着选择新的框架的问题,问了下身边的朋友,发现他们都在用 Spring ,然而我发现 Spring 的话,经常要配置各种东西,习惯了 Play 的简单明了的配置方式,确实有些不习惯 Spring ,这个时候发现了 Spri

  • 超详细的Spring Boot入门笔记(总结)

    1. Spring Boot 入门 Spring Boot是Spring社区较新的一个项目.该项目的目的是帮助开发者更容易的创建基于Spring的应用程序和服务,让更多人的人更快的对Spring进行入门体验,让Java开发也能够实现Ruby on Rails那样的生产效率.为Spring生态系统提供了一种固定的.约定优于配置风格的框架. Spring Boot具有如下特性: 为基于Spring的开发提供更快的入门体验 开箱即用,没有代码生成,也无需XML配置.同时也可以修改默认值来满足特定的需求

  • Spring Boot学习入门之表单验证

    前言 所谓表单验证,即校验用户提交的数据的合理性的,比如是否为空了,密码长度是否大于6位,是否是纯数字的,等等.spring boot是如何帮我们实现表单验证的呢?下面话不多说了,来一起看看详细的介绍吧. 假设现在我们存在这么一个注册界面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>hello spring boot</title>

  • SpringBoot入门之集成Druid的方法示例

    Druid:为监控而生的数据库连接池.这篇先了解下它的简单使用,下篇尝试用它做多数据源配置. 主要参考:https://github.com/alibaba/druid/wiki/ 常见问题https://github.com/alibaba/druid/tree/master/druid-spring-boot-starter 一.引入依赖 这里看其他博客都是引用的Druid,由于是使用springboot集成,这里参考druid官方文档,用的是druid-spring-boot-starte

  • springboot websocket简单入门示例

    之前做的需求都是客户端请求服务器响应,新需求是服务器主动推送信息到客户端.百度之后有流.长轮询.websoket等方式进行.但是目前更加推崇且合理的显然是websocket. 从springboot官网翻译了一些资料,再加上百度简单实现了springboot使用websocekt与客户端的双工通信. 1.首先搭建一个简单的springboot环境 <!-- Inherit defaults from Spring Boot --> <parent> <groupId>o

  • jQuery简单入门示例之用户校验demo示例

    本文实例讲述了jQuery简单入门示例之用户校验.分享给大家供大家参考,具体如下: jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可

  • Java Spring开发环境搭建及简单入门示例教程

    本文实例讲述了Java Spring开发环境搭建及简单入门示例.分享给大家供大家参考,具体如下: 前言 虽然之前用过Spring,但是今天试着去搭建依然遇到了困难,而且上网找教程,很多写的是在web里使用Spring MVC的示例,官方文档里的getting start一开始就讲原理去了(可能打开的方法不对).没办法,好不容易实验成功了,记下来免得自己以后麻烦. 添加依赖包 进入spring官网,切换到projects下点击 spring framework.官网上写的是以maven依赖的形式写

  • Sanic框架安装与简单入门示例

    本文实例讲述了Sanic框架安装与简单用法.分享给大家供大家参考,具体如下: Sanic是一个类似Flask的Python 3.5+ Web服务器,它的写入速度非常快.除了Flask之外,Sanic还支持异步请求处理程序.这意味着你可以使用Python 3.5中新的闪亮的异步/等待语法,使你的代码非阻塞和快速. 前言:Sanic最低支持Python 3.5,如果需要学习Sanic,请先下载版本不低于3.5的Python包 安装Sanic pip3 install sanic 注意:Sanic暂时

  • 利用百度echarts实现图表功能简单入门示例【附源码下载】

    本文实例讲述了利用百度echarts实现图表功能.分享给大家供大家参考,具体如下: 百度有一款开源的图表控件,号称是大数据时代最好的图表控件.刚好目前的项目需要用图表展示给客户看数据,所以就选择这个三方的控件.对这种控件一般来说使用起来应该没有太大的难度,基本就是按照它的规则组装json数据,关键是配置上面, 如果刚开始入门,不太懂,可能真要花点时间来搞的.我整理了一个最基本的入门例子,里面有详细的注释,按这种方式去加载相关 js 就没有问题了: <!DOCTYPE html> <hea

  • SpringBoot+Websocket实现一个简单的网页聊天功能代码

    最近做了一个SpringBoot的项目,被SpringBoot那简介的配置所迷住.刚好项目中,用到了websocket.于是,我就想着,做一个SpringBoot+websocket简单的网页聊天Demo. 效果展示: 当然,项目很简单,没什么代码,一眼就能明白 导入websocket的包. 通过使用SpringBoot导入包的时候,我们可以发现,很多包都是以 spring-boot-starter 开头的,对于我这种强迫症 ,简直是福音 <dependency> <groupId>

  • SpringBoot如何添加WebSocket的方法示例

    一.WebSocket介绍 网站上的即时通讯是很常见的,比如网页的QQ,聊天系统等.按照以往的技术能力通常是采用轮询.Comet技术解决. HTTP协议是非持久化的,单向的网络协议,在建立连接后只允许浏览器向服务器发出请求后,服务器才能返回相应的数据.当需要即时通讯时,通过轮询在特定的时间间隔(如1秒),由浏览器向服务器发送Request请求,然后将最新的数据返回给浏览器.这样的方法最明显的缺点就是需要不断的发送请求,而且通常HTTP request的Header是非常长的,为了传输一个很小的数

  • 史上最简单的MyBatis动态SQL入门示例代码

    假如有如下的关于书籍基本信息的表: DROP DATABASE IF EXISTS `books`; CREATE DATABASE `books`; USE books; DROP TABLE IF EXISTS `book`; CREATE TABLE `book` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(128) DEFAULT NULL, `author` varchar(64) DEFAULT NULL, `pres

  • SpringBoot+WebSocket搭建简单的多人聊天系统

    前言 今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么 首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通信的协议.这是一种比较官方的说法,简单点来说就是,在一次TCP连接中,通信的双方可以相互通信.比如A和B在打电话,A说话的时候,B也可以说话来进行信息的交互,这就叫做全双工通信.对应的是单工通信,和半双工通信,单工通信就是只能由A向B通信,比如电脑和打印机.半双工通信是可以AB可以互相通信,但是同一时间只

  • SpringBoot+WebSocket+Netty实现消息推送的示例代码

    上一篇文章讲了Netty的理论基础,这一篇讲一下Netty在项目中的应用场景之一:消息推送功能,可以满足给所有用户推送,也可以满足给指定某一个用户推送消息,创建的是SpringBoot项目,后台服务端使用Netty技术,前端页面使用WebSocket技术. 大概实现思路: 前端使用webSocket与服务端创建连接的时候,将用户ID传给服务端 服务端将用户ID与channel关联起来存储,同时将channel放入到channel组中 如果需要给所有用户发送消息,直接执行channel组的writ

随机推荐