IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> WebSocket推送消息 -> 正文阅读

[网络协议]WebSocket推送消息

以下是一个用Vue+SpringBoot+SprringCloud+Nacos写的一个WebSocket推送消息,一个是客户端,一个是服务端。

举一个简单的推送例子:当两个人登录网站买西游记书,两边都是显示的100本书,当其中一个购买了一本后,后端就调用websocket给前端所有登录网站的人发送消息说已经出售了一本,前端收到消息后就让所有人重新查询所有,自动刷新数量,方便购买。

客户端如下:

我把它写在了初始化页面完成后,首先判断浏览器支不支持websocket,随后便和后端建立连接,当你关闭这个页面后连接也会随之关闭,当收到后端发送过来的消息时,你可以写一些事件,比如:弹窗,放音乐等操作

mounted() {
        var websocket = null;
        if('WebSocket' in window){
            websocket = new WebSocket('ws://路径/webSocket')
        }else{
            this.$message.error("该浏览器不支持websocket")
        }
        websocket.onopen = function(event){
            console.log('建立连接')
        }
        websocket.onclose = function(event){
            console.log('连接关闭')
        }
        websocket.onmessage = (event)=>{
            console.log('收到消息:'+event.data)
            //弹窗提醒,播放音乐等操作
            
        }
        websocket.onerror = function(){
            this.$message.error("websocket通信发生错误")
        }
        websocket.onbeforeunload = function(){
            websocket.close();
        }
    },

服务端如下:

先创建一个配置文件,如下:

package com.czxy.config;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Component
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

WebSocket类,如下:
每一个session都是一个用户,把所有登录了本网站的用户都存到了websocketSet中,第一个方法是建立连接,把当前连接的用户存放进去,第二个方法是退出本网站后从websocketSet中删除当前退出的用户,第三个方法就是给前端发送消息,比如:在登陆校验成功后调用WebSocket的sendMessage()方法,然后前端在做出一系列的操作

package com.czxy.service;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.client.WebSocketClient;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {

    private Session session;
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        log.info("【websocket消息】 有新的连接,总数:{}",webSocketSet.size());
    }
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        log.info("【websocket消息】 连接断开,总数:{}",webSocketSet.size());
    }
    @OnMessage
    public void sendMessage(String message){
        for (WebSocket webSocket : webSocketSet) {
            log.info("【websocket消息】 广播消息,message={}"+message);
            try{
                webSocket.session.getBasicRemote().sendText(message);
            }catch(Exception e){
                e.printStackTrace();
            }
        }
    }


}
  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2021-08-16 12:04:52  更:2021-08-16 12:07:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/28 6:12:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计