1、引入相关依赖

<parent>

<groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>2.1.1.RELEASE</version>

        <relativePath/> <!-- lookup parent from repository -->

  </parent>

 <dependencies>

  <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

 </dependencies>

2、写配置类

package springboot.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.messaging.simp.config.MessageBrokerRegistry;

import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;

import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;

import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    public void registerStompEndpoints(StompEndpointRegistry registry) {

        registry.addEndpoint("/endpointZouHong").withSockJS();

    }

    @Override

    public void configureMessageBroker(MessageBrokerRegistry registry) {

        registry.enableSimpleBroker("/topic");

    }

}

3、实体类

服务端接收类：

package springboot.bean;

public class ZouhongServerMessage {

    private String name;

        public String getName() {

        return name;

    }

        public void setName(String name) {

        this.name = name;

    }

}

浏览器接收类：

package springboot.bean;

public class ZouhongBrowResponse {

   private String responseMessage;

   public ZouhongBrowResponse(String responseMessage) {

       this.responseMessage = responseMessage;

   }

    public String getResponseMessage() {

    return responseMessage;

     }

   public void setResponseMessage(String responseMessage) {

    this.responseMessage = responseMessage;

    }

}

4、处理器

package springboot.controller;

import org.springframework.messaging.handler.annotation.MessageMapping;

import org.springframework.messaging.handler.annotation.SendTo;

import org.springframework.stereotype.Controller;

import springboot.bean.ZouhongBrowResponse;

import springboot.bean.ZouhongServerMessage;

@Controller

public class ZHController {

    @MessageMapping("/welcome")

    @SendTo("/topic/getResponse")

    public ZouhongBrowResponse say(ZouhongServerMessage message) throws Exception{

        Thread.sleep();

        return new ZouhongBrowResponse("welcome,"+message.getName()+"!");

   }

}

5、前端

<!doctype html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title>SpringBoot+websocket+广播式</title>

</head>

<body>

<noscript><h2 style="color:#ff0000">貌似你的浏览器不支持websocket</h2></noscript>

<div>

  <div>

    <button id="connect" onclick="connect()">连接</button>

    <button id="disconnect" disabled="disabled" onclick="disconnect()">断开连接</button>

  </div>

  <div id="conversationDiv">

   <label>输入你的名字</label><input type="text" id="name">

   <button id="sendName" onclick="sendName()">发送</button>

   <p id="response"></p>

  </div>

</div>

<script th:src="@{js/jquery.js}"></script>

<script th:src="@{js/stomp.min.js}"></script>

<script th:src="@{js/sockjs.min.js}"></script>

<script th:inline="javascript">

 var stompClient=null;

 function setConnected(connected){

     document.getElementById('connect').disabled=connected;

     document.getElementById('disconnect').disabled=!connected;

     document.getElementById('conversationDiv').style.visibility=connected?'visible':'hidden';

     $("#response").html();

 }

function connect(){

    var socket=new SockJS('/endpointZouHong');

    stompClient=Stomp.over(socket);

    stompClient.connect({},function(frame){

        setConnected(true);

        console.log("Connected:   "+frame);

        stompClient.subscribe('/topic/getResponse',function(response){

            showResponse(JSON.parse(response.body).responseMessage);

        });

    });

}

function disconnect(){

    if(stompClient!=null){

        stompClient.disconnect();

    }

    setConnected(false);

    console.log("Disconnected");

}

function sendName(){

    var name=$("#name").val();

    console.log(name);

    stompClient.send('/welcome',{},JSON.stringify({'name':name}));

}

function showResponse(message){

    var response=$("#response");

    response.html(message);

}

</script>

</body>

</html>

6、效果图

websocket广播式实例的更多相关文章

  1. springboot + websocket + spring-messaging实现服务器向浏览器广播式

    目录结构 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...

  2. spring+websocket的整合实例--可使用

    spring+websocket的整合实例----借鉴如下链接--此贴用于笔记 https://blog.csdn.net/qq_35515521/article/details/78610847

  3. 新入手服务器不会玩？抢占式实例服务器教程，从零搭建tomcat超简流程

    新入手服务器不会玩?抢占式实例服务器教程,从零搭建tomcat超简流程 相信很多新人入手Linux服务器后,一脸无奈,这黑框框究竟能干啥?忽觉巨亏血亏不是? 这里面门道可不是你想象中的那么点,简则服务 ...

  4. springboot2 -广播式WebSocket

    1.WebSocket,STOMP,SockJS含义 WebSocket:WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. SockJS:SockJS 是 We ...

  5. C++学习笔记36 （模板的细节明确template specialization）和显式实例（template instantiation）

    C++有时模板很可能无法处理某些类型的. 例如: #include <iostream> using namespace std; class man{ private: string n ...

  6. .NET 即时通信，WebSocket服务端实例

    即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳 ...

  7. C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

    看到这篇文章的题目,估计很多人都会问,这个组件是不是有些显的无聊了,说到web通信,很多人都会想到ASP.NET SignalR,或者Nodejs等等,实现web的网络实时通讯.有关于web实时通信的 ...

  8. html5 WebSocket的Js实例教程

    详细解读一个简单+ ,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读. 从WebSocket通讯三个阶段(打开握手.数据传递. ...

  9. Nginx实战之反向代理WebSocket的配置实例

    http://www.jb51.net/article/112183.htm 最近在工作中遇到一个需求,需要使用 nginx 反向代理websocket,经过查找一番资料,目前已经测试通过,所以这篇文 ...

随机推荐

  1. csps2019记

    Day0: 上午疯狂颓板子(树状数组,KMP)屁都没考,感觉海星. 上午坐大巴去了德州,中午和skyh凑钱吃饭(其实是我请他)rp++. 下午在火车上和侯神打扑克,拉火车之神Get. 到燕大试机,敲了 ...

  2. 一种单机支持 JavaWeb 容器万级并发的设想

    当前的大部分 Java web 容器基于 Bio 线程模型,例如常见的 tomcat ,默认 200 线程,即 200 连接.由此带来的问题是,如果想提高并发,或者提高资源利用率,就得加大线程数. 如 ...

  3. 使用Vue Baidu Map对百度地图实现输入框搜索定位

    前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map     ...

  4. golang基础之第一个go程序

    编写 Hello World 创建文件 hello.go,不写入任何内容.按照如下的命令尝试进行编译 $ go run hello.go 将会打印出如下错误: package main: hello. ...

  5. Debug 路漫漫-12：Python: ValueError: 'userid' is both an index level and a column label, which is ambiguous.

    啊,又遇到难题了 == 想要对两个 dataframe 做自然连接 merge,连接的key 为 “userid”,但是报错:ValueError: 'userid' is both an index ...

  6. php json_decode无法处理\解决方法

    php json_decode无法处理\解决方法 <pre>$aa=urlencode('eee\ee');$dfda='[{"company":"测试&qu ...

  7. Gitlab 部署汉化及邮件配置

    Gitlab 简介 Gitlab 是一个基于git私有代码管理的服务集成. Nginx:静态web服务器. gitlab-shell:用于处理Git命令和修改authorized keys列表. gi ...

  8. kali渗透综合靶机(九)--Typhoon靶机

    kali渗透综合靶机(九)--Typhoon靶机 靶机下载地址:https://www.vulnhub.com/entry/typhoon-102,267/ 一.主机发现 1.netdiscover ...

  9. 练手WPF（三）——扫雷小游戏的简易实现（中）

    八.随机布雷 /// <summary> /// 随机布地雷 /// </summary> /// <param name="mineNum"> ...

  10. python time包中的time.time()和time.clock()的区别

    在统计python代码 执行速度时要使用到time包,在查找相关函数时有time.time()和time.clock()两个函数可供选择.而两者是有区别的: cpu 的运行机制:cpu是多任务的,例如 ...