Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >springboot vue整合websocket

springboot vue整合websocket

作者头像
似水的流年
发布于 2019-12-06 06:08:13
发布于 2019-12-06 06:08:13
88500
代码可运行
举报
文章被收录于专栏:电光石火电光石火
运行总次数:0
代码可运行

1.引入包

compile 'org.springframework.boot:spring-boot-starter-websocket'

2.新建类MyWebsocket

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint(value = "/websocket")
@Component
public class MyWebsocket {

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

    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<MyWebsocket> webSocketSet = new CopyOnWriteArraySet<MyWebsocket>();

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

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        System.out.println("连接成功");
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
        try {
            sendMessage("success");
            System.out.println("发送连接成功");
        } catch (IOException e) {
            System.out.println("IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        System.out.println("有一连接关闭");
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("来自客户端的消息:" + message);
        //群发消息
        //sendInfo("ghghhhjkh");
    }

    /**
     * 群发自定义消息
     * */
    public static void sendInfo(String message) throws IOException {
        for (MyWebsocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

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


    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
        //this.session.getAsyncRemote().sendText(message);
    }

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

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

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

}

3.调用接口MyWebsocket.sendInfo("notice");

4.vue代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 methods:{
      websocket () {
        let ws = new WebSocket('ws://192.168.1.205:9032/websocket');
        ws.onopen = () => {
          // Web Socket 已连接上,使用 send() 方法发送数据
          //console.log('数据发送中...')
          //ws.send('Holle')
          //console.log('数据发送完成')
        }
        ws.onmessage = evt => {
          console.log('数据已接收...')
          var received_msg = evt.data;
          console.log(received_msg);

          if("notice" == received_msg)
          {
            this.initData();
            this.play();
          }
          else{
            console.log("不刷新");
          }
        }
       /* ws.onclose = function () {
          // 关闭 websocket
          console.log('连接已关闭...')
        }
        // 路由跳转时结束websocket链接
        this.$router.afterEach(function () {
          ws.close()
        })*/
      },
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
SpringBoot整合websocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
用户3467126
2019/09/04
2.2K1
SpringBoot整合websocket
SprinBoot——SpringBoot项目WebSocket推送
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/106472.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/04
9740
WebSocket在Spring Boot中的使用
“WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。”
小诸葛
2020/04/14
5K0
WebSocket在Spring Boot中的使用
springboot整合篇-springboot整合websocket
ServerEndpoint的实现主要针对业务领域对websocket消息进行处理,主要使用@OnOpen对websocket连接建立时需要实现的逻辑,@OnClose对websocket连接关闭时需要实现的逻辑,@OnMessage对websocket收到消息时的处理以及@OnError对websocket发生错误时的处理方式。
Java开发者之家
2021/06/17
2K0
Spring Boot 整合使用Websocket
使用websocket有两种方式:1是使用sockjs,2是使用h5的标准。使用Html5标准自然更方便简单,所以记录的是配合h5的使用方法。
BUG弄潮儿
2020/06/12
1.1K0
WebSocket & ws协议
解决了常规AJAX轮询、传统长连接的性能损失。因为传统的方式是 连接打开、连接关闭型性能损失很大。Websocker实现的方式是在单位时间内,不会频繁的连接打开与关闭。我们真正解决还是需要依赖Tomcat或者Netty开发!
收心
2022/01/19
1.3K0
SpringBoot集成WebSocket(原生注解方式)
WebSockets 它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API,可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。 WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的API。 1.添加依赖 <!-- websocket--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot
甄士隐
2022/01/26
1.7K0
SpringBoot集成WebSocket(原生注解方式)
Spring Boot集成websocket
像目前的直播、弹幕、小游戏等方面都用到了websocet进行长链接,相对于http的一次请求一次响应websocket只需要进行一次握手即长久性的建立链接进行消息互通。
余生大大
2022/11/02
1.9K0
Spring Boot集成websocket
WebSocket JAVA
源码:https://github.com/jxq0816/WebSocket websocket 要求jdk 1.8 一、pom.xml <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> 二、WebSocketTest
week
2018/08/24
1.1K0
Java 与 JavaScript 对websocket的使用
ebsocket,HTML5中新一代全双工通信协议。其底层仍然是http协议。 传统 HTTP 请求响应客户端服务器交互图 WebSocket 请求响应客户端服务器交互图 WebSocket 客户端支
庞小明
2018/03/07
2K0
Java 与 JavaScript 对websocket的使用
WebSocket | 为什么你前后端推送不会用?因为你少了WebSocket的帮忙
WebSocket是一种基于TCP的网络协议,实现了客户端和服务端的全双工通信,即,后端可以推送数据到客户端,客户端可以推送数据到后端。其模型如下所示:
netkiller old
2021/01/11
8510
WebSocket | 为什么你前后端推送不会用?因为你少了WebSocket的帮忙
SpringBoot集成WebSocket,实现后台向前端推送信息
在一次项目开发中,使用到了Netty网络应用框架,以及MQTT进行消息数据的收发,这其中需要后台来将获取到的消息主动推送给前端,于是就使用到了MQTT,特此记录一下。
JAVA葵花宝典
2021/01/03
1K0
SpringBoot集成WebSocket,实现后台向前端推送信息
SpringBoot+webSocket实现扫码登录功能
好了!分析完了这些。你们一定在想。。还有完没完啊。。不要在BB了。。赶紧贴代码吧。。
好好学java
2021/07/05
1.3K0
Java后端WebSocket的Tomcat实现
文章摘要随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据。 我们知道,传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据;这种客户端是主动方,服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成
庞小明
2018/03/07
2.9K1
分享基于 websocket 网页端聊天室
有一个月没有写博客了,也是因为年前需求多、回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!!
Krry
2019/02/18
1.7K0
Spring Boot 集成 WebSocket,轻松实现信息推送!
在一次项目开发中,使用到了Netty 网络应用框架,以及 MQTT 进行消息数据的收发,这其中需要后台来将获取到的消息主动推送给前端,于是就使用到了MQTT,特此记录一下。
Java技术栈
2021/04/21
1.2K0
扫码登录的实现方案
开发工具:MacOS、IDEA 技术栈:JDK1.8、SpringBoot、Thymeleaf、websocket、ZXing、jjwt
每天学Java
2020/06/02
2K0
SpringBoot集成WebSocket的基本实现
此时我们第一反应,前端定时使用HTTP协议调用后端接口,刷新界面。OK,需求实现,下班回家!
用户10714507
2023/10/08
1.1K0
WebSocket的初次使用及调试
4.0.0 WeeeebSkt WeeeebSkt 0.0.1-SNAPSHOT war
ZONGLYN
2019/08/08
2K0
springboot整合websocket
我们都知道HTPP协议是基于请求响应模式,并且无状态的。HTTP通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息。
全栈程序员站长
2022/09/19
9840
springboot整合websocket
相关推荐
SpringBoot整合websocket
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档