WebSocket开发

目录

前言

1.介绍

2.原理解析 

3.简单的聊天室搭建

4.点到点消息传输 

总结


前言

WebSocket 是互联网项目中画龙点睛的应用,可以用于消息推送、站内信、在线聊天等业务。


1.介绍

WebSocket 是一种基于 TCP 的新网络协议,它是一种持久化的协议,实现了全双工通信,可以让服务器主动发送消息给客户端。

在 WebSocket 出现之前,要保持消息更新和推送一般采用轮询的方式,例如,开启一个服务进程每隔一段时间去发送请求给另外一个服务,以此获取最新的资源信息。这里都很阻塞请求,性能非常差,也会占用资源。所以考虑使用 WebSocket 来实现,使用连接实现传输,性能很高,整个客户端和服务之间交互的请求过程如图。

由图可知,最开始客户端也需要发起一次 http 请求,然后 WebSocket 协议需要通过已建立的 TCP 连接来传输数据,可见 WebSocket 和 HTTP 请求也有一些交集。但是 WebSocket 只用发起一次 HTTP 请求之后就可以通过回调机制不断地获取数据并进行交互。 

整合 WebSocket 到 SpringBoot 

在 pom.xml 中添加如下依赖:

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

2.原理解析 

通信协议转换过程: 

服务端 API 

Tomcat的7.0.5 版本开始支持WebSocket,并且实现了Java WebSocket规范。

Java WebSocket应用由一系列的Endpoint组成。Endpoint 是一个java对象,代表WebSocket链接的一端,对于服务端,我们可以视为处理具体WebSocket消息的接口。

我们可以通过两种方式定义Endpoint:

  • 第一种是编程式, 即继承类 javax.websocket.Endpoint并实现其方法。
  • 第二种是注解式, 即定义一个POJO, 并添加 @ServerEndpoint相关注解。

Endpoint实例在WebSocket握手时创建,并在客户端与服务端链接过程中有效,最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法, 规范实现者确保生命周期的各个阶段调用实例的相关方法。 

服务端接受客户端发送的数据:

编程式注解式
通过添加 MessageHandler 消息处理器来接收消息在定义Endpoint时,通过@OnMessage注解指定接收消息的方法

服务端推送消息给客户端:

发送消息则由 RemoteEndpoint 完成, 其实例由 Session 维护。

发送消息有2种方式发送消息

  • 通过session.getBasicRemote 获取同步消息发送的实例 , 然后调用其 sendXxx()方法发送消息。
  • 通过session.getAsyncRemote 获取异步消息发送实例,然后调用其 sendXxx() 方法发送消息。

3.简单的聊天室搭建

WebSocket 使用 ws 或 wss 作为通信协议,和 HTTPS 协议类似,其中 wss 表示在 TLS 之上的 WebSocket。一个完整的 URL 如下:ws://example.com/api。实现聊天室的思路可分成以下两种:

  1. 利用 websocket 依赖中的 HandshakeInterceptor 和 WebSocketHandler,实现对应的方法。
  2. 利用注解实现对话的连接、断开、信息发送触发等功能。为了更好地理解 WebSocket 的流程,我们选择第二种方式来实现聊天室的功能。

编写一个配置文件,配置类代码:

package org.example.config;

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

@Configuration
public class WebSocketConfig {
    /**
     * 配置 WebSocketEndpointServer
     *
     * 注入 ServerEndpointExporter 到web启动流程中
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

创建 WebSocket 服务端,需要通过注解来实现如下方法,见如下:

事件类型

WebSocket 注解

事件描述

open

@OnOpen

当打开连接后触发

message

@OnMessage

当接收客户端信息时触发

error

@OnError

当通信异常时触发

close

@OnClose

当连接关闭时触发

下面正式编写 WebSocket 服务端代码,代码如下:

package org.example.componment;


import org.example.chatobject.Message;
import org.springframework.stereotype.Component;

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

@Component
@ServerEndpoint("/chat")//标记此类为服务端
public class WebSocketChatSerever {

    /*
    使用线程安全的 Map存储会话
     */
    private static Map<String, Session> onlineSession = new ConcurrentHashMap<>();

    /*
    当打开连接的时候,添加会话和更新在线人数
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineSession.put(session.getId(), session);
        sendMessageToAll(Message.toJsonResult(Message.ENTER, "", "", onlineSession.size()));
    }

    /**
     * 发送信息给所有人
     */
    @OnMessage
    private static void sendMessageToAll(String msg) {
        onlineSession.forEach((id, session) -> {
            try {
                session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    /*
    当关闭连接,移除会话并减少在线人数。
     */
    @OnClose
    public void onClose(Session session) {
        onlineSession.remove(session.getId());
        sendMessageToAll(Message.toJsonResult(Message.QUIT, "", "下线啦!", onlineSession.size()));
    }
    /*
    当通信发生异常时,打印错误日志
     */
    @OnError
    public void OnError(Session session,Throwable error){
        error.printStackTrace();
    }
}

上面的代码就是对 onError、onMessage、onOpen 注解进行编写接口,使用线程安全的 Map 来存储对话信息,根据不同的操作对在线人数和当前会话用户进行删改。sessionid 对应每一个连接的用户,由于没有注册,所有保存用户信息用处不大。其中 Message 对象是对聊天消息进行封装的数据类,具体实现代码如下:

package org.example.chatobject;

import com.alibaba.fastjson.JSON;

/**
 * 聊天对象
 */
public class Message {
    //进入聊天
    public static final String ENTER = "ENTER";
    //聊天
    public static final String TALK = "TALK";
    //退出聊天
    public static final String QUIT = "QUIT";
    //消息类型
    private String type;
    //发送人
    private String username;
    //发送消息
    private String message;
    //在线人数
    private int onlineCount;
    //返回处理后的 json 结果

    public Message(String type, String username, String message, int onlineCount) {
        this.type = type;
        this.username = username;
        this.message = message;
        this.onlineCount = onlineCount;
    }

    public static String toJsonResult(String type, String username, String message, int onlineCount) {
        return JSON.toJSONString(new Message(type, username, message, onlineCount));
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public int getOnlineCount() {
        return onlineCount;
    }

    public void setOnlineCount(int onlineCount) {
        this.onlineCount = onlineCount;
    }
}

为了更好地编写前端页面和处理参数(JSON 格式为主)传递,添加如下配置到 pom.xml:

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>2.0.25</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

然后编写一个 Controller 文件来实现简单地路由和逻辑,具体实现代码如下:

package org.example.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;

@RestController
public class ChatController {
    @GetMapping("/login")
    public ModelAndView login() {
        return new ModelAndView("/login");
    }
    @GetMapping("/chat")
    public ModelAndView index(String username, String password, HttpServletRequest request) {
        return new ModelAndView("/chat");
    }

}

编写前端页面,运行项目,访问登录页面 http://localhost:8080/login,如图所示:

错误页面:

​ 

聊天页面,如图:

​在前端中也需要编写 WebSocket 的客户端操作,核心代码如下:

<script>

    /**
     * WebSocket客户端
     *
     */
    function createWebSocket() {
        /**
         * WebSocket客户端
         */
        var serviceUri = 'ws://localhost:8080/chat';
        var webSocket = new WebSocket(serviceUri);
        /**
         * 打开连接的时候
         */
        webSocket.onopen = function (event) {
            console.log('websocket打开连接....');
        };

        /**
         * 接受服务端消息
         */
        webSocket.onmessage = function (event) {
            console.log('websocket:%c' + event.data);
            // 获取服务端消息
            var message = JSON.parse(event.data) || {};

            var $messageContainer = $('.message_container');
            if (message.type === 'TALK') {
                var insertOneHtml = '<div class="mdui-card" style="margin: 10px 0;">' +
                    '<div class="some-class">' +
                    '<div class="message_content">' + message.username + ":" + message.message + '</div>' +
                    '</div></div>';
                $messageContainer.append(insertOneHtml);
            }
            // 更新在线人数
            $('#chat_num').text(message.onlineCount);
            //防止刷屏
            var $cards = $messageContainer.children('.mdui-card:visible').toArray();
            if ($cards.length > 5) {
                $cards.forEach(function (item, index) {
                    index < $cards.length - 5 && $(item).slideUp('fast');
                });
            }
        };

        /**
         * 关闭连接
         */
        webSocket.onclose = function (event) {
            console.log('WebSocket关闭连接');
        };

        /**
         * 通信失败
         */
        webSocket.onerror = function (event) {
            console.log('WebSocket发生异常');

        };
        return webSocket;
    }

    var webSocket = createWebSocket();


    /**
     * 通过WebSocket对象发送消息给服务端
     */
    function sendMsgToServer() {
        var $message = $('#msg');
        if ($message.val()) {
            webSocket.send(JSON.stringify({username: $('#username').text(), msg: $message.val()}));
            $message.val(null);
        }

    }

    /**
     * 清屏
     */
    function clearMsg() {
        $(".message_container").empty();
    }

    /**
     * 使用ENTER发送消息
     */
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        e.keyCode === 13 && sendMsgToServer();
    };


</script>

其中,createWebSocket 方法是专门用来创建 WebSocket 对象的,并且封装了处理服务器的消息、错误处理、连接服务器等操作。

解析:

websocket对象创建:

let  ws  =  new WebSocket(URL);

websocket对象相关事件 :

事件

事件处理程序

描述

open

ws.onopen

连接建立时触发

message

ws.onmessage

客户端接收到服务器发送的数据时触发

close

ws.onclose

连接关闭时触发

websocket对象提供的方法 :

方法名称

描述

send()

通过websocket对象调用该方法发送数据给服务端

4.点到点消息传输 

所谓点到点消息传输,其实就是我们常说的私聊功能。一个用户相当于一个连接,两个用户之间在一个通道中进行消息传输,私密地聊天。

在之前项目地基础上,进一步引入一个新的概念:频道号。就像听广播一样,必须要在相同的频道上才能听到消息,同样地,两个用户必须在相同的频道上才能接受到对方发来的消息。

于是改写 WebSocket 类中的 OnMessage 方法,具体代码如下:

    @OnMessage
    public static void sendMessageToAll(String msg, Session session, @PathParam("nickname")String nickname) {
        log.info("来自客户端:{} 发来的消息:{}",nickname,msg);
        SocketConfig socketConfig;
        ObjectMapper objectMapper = new ObjectMapper();
        try {
            socketConfig = objectMapper.readValue(msg, SocketConfig.class);
            if (socketConfig.getType() == 1){//私聊
                socketConfig.setFormUser(session.getId());
                Session fromSession = map.get(socketConfig.getFormUser());
                Session toSession = map.get(socketConfig.getToUser());
                if (toSession != null){// 接收者存在,发送以下消息给接受者和发送者
                    fromSession.getAsyncRemote().sendText(nickname+": "+socketConfig.getMsg());
                    toSession.getAsyncRemote().sendText(nickname+": "+socketConfig.getMsg());
                }else {
                    fromSession.getAsyncRemote().sendText("频道号不存在或者对方不在线");
                }
            }else {//群聊
                broadcast(nickname+": "+socketConfig.getMsg());
            }
        } catch (Exception e) {
            log.error("发送消息出错");
            e.printStackTrace();
        }
    }

总结

了解了 WebSocket 在Spring Boot 中的整合和实践,以群聊和私聊两大功能为例,具体讲解了相应的实现方法。对 WebSocket 的常用方法的封装,进行了详细的介绍。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/246650.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vim + ctags 跳转, 查看函数定义

yum install ctags Package ctags-5.8-13.el7.x86_64 already installed and latest version 创建 /home/mzh/pptp-master/tags.sh #!/usr/bin/shWORKDIR/home/mzh/pptp-masterfind ${WORKDIR} -name "*.[c|h]" | xargs ctags -f ${WORKDIR}/tags find /usr/inclu…

花裤衩vue-element-admin-master

这个模板是集成度比较高的 在实习的时候老是依赖装不上 今天在公司 把版本切换到16.17.1 一次就成功了 里面的工具还是比较多的&#xff0c; vue3里开源模板里工具比较多的是vben&#xff0c;它同样安装依赖比较难搞

React Native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)

前言 本文基于&#xff1a;“react-native” : “^0.73.0” 1.安装 Node Node.js&#xff0c;下载时选择 > 18 版本 2.下载并安装 JDK Java SE Development Kit (JDK)&#xff0c;下载时选择 17 版本 安装 验证是否安装成功 打开命令提示符输入 javac -version 回车 3.…

Springboot集成支付宝支付---完整详细步骤

网页操作步骤 1.进入支付宝开发平台—沙箱环境 使用开发者账号登录开放平台控制平台 2.点击沙箱进入沙箱环境 说明&#xff1a;沙箱环境支持的产品&#xff0c;可以在沙箱控制台 沙箱应用 > 产品列表 中查看。 3.进入沙箱&#xff0c;配置接口加签方式 在沙箱进行调试前…

网页设计--第7次课后作业

已在qq课程群发送了课程的相关资料。 1、安装nodejJS。 2、安装vue-cli。 3、新建一个自己的vue工程化项目。 4、修改默认的vue项目&#xff0c;体会main.js,app.vue以及其他vue文件之间的调用关系&#xff0c;明白vue工程化项目的运行原理。 可以参考视频讲解&#xff08;…

SQL排列组合

SQL排列组合 1、排列组合概述2、SQL排列组合2.1、排列2.2、组合3、SQL排列组合的应用1、排列组合概述 排列组合是针对离散数据常用的数据组织方法,本节将分别介绍排列、组合的SQL实现方法,并结合实例着重介绍通过组合对数据的处理 如何使用SQL实现排列与组合?本节将通过介绍…

LeetCode 2132. 用邮票贴满网格图:二维前缀和 + 二维差分

【LetMeFly】2132.用邮票贴满网格图&#xff1a;二维前缀和 二维差分 力扣题目链接&#xff1a;https://leetcode.cn/problems/stamping-the-grid/ 给你一个 m x n 的二进制矩阵 grid &#xff0c;每个格子要么为 0 &#xff08;空&#xff09;要么为 1 &#xff08;被占据&…

欧盟eDelivery的AS4解决方案

为实现绿色和数字欧洲的愿景&#xff0c;欧盟启动了“数字欧洲计划&#xff08;DEP&#xff09;”&#xff0c;总预算为75.9亿欧元&#xff0c;重点是将数字技术带给企业、公民和公共行政部门。它将建立数字能力和基础设施&#xff0c;并以创建数字市场为目标&#xff0c;主要通…

escapeshellarg参数绕过和注入的问题

escapeshellcmd escapeshellcmd(string $command): string command--要转义的命令。 escapeshellcmd() 对字符串中可能会欺骗 shell 命令执行任意命令的字符进行转义。 此函数保证用户输入的数据在传送到 exec() 或 system() 函数&#xff0c;或者 执行操作符 之前进行转义。 …

apk反编译修改教程系列---简单给app添加启动弹窗 添加对话框 跳转指定网页等【七】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…

FolkMQ 国产消息中间件,v1.0.21 发布

简介 采用 “多路复用” “内存运行” “快照持久化” “Broker 集群模式”&#xff08;可选&#xff09;基于 Socket.D 网络应用协议 开发。全新设计&#xff0c;自主架构&#xff01; 角色功能生产端发布消息&#xff08;Qos0、Qos1&#xff09;、发布定时消息&#xff…

jenkins-Generic Webhook Trigger指定分支构建

文章目录 1 需求分析1.1 关键词 : 2、webhooks 是什么&#xff1f;3、配置步骤3.1 github 里需要的仓库配置&#xff1a;3.2 jenkins 的主要配置3.3 option filter配置用于匹配目标分支 实现指定分支构建 1 需求分析 一个项目一般会开多个分支进行开发&#xff0c;测试&#x…

STM32--Wi-Fi插座_风扇_灯

项目需求 两个互相通信的双方&#xff0c;波特率必须相同!!!!!! 通过 ESP8266 模块&#xff0c;实现手机控制 wifi 插座 / 风扇 / 灯。 项目设计 串口 1 用于与 ESP8266 通讯&#xff0c;串口 2 连接 PC &#xff0c;用于打印 log &#xff0c;查看系统状态。 项目实现 注意&a…

ShenYu网关注册中心之HTTP注册原理

文章目录 1、客户端注册流程1.1、读取配置1.1.1、用于注册的 HttpClientRegisterRepository1.1.2、用于扫描构建 元数据 和 URI 的 SpringMvcClientEventListener 1.2、扫描注解&#xff0c;注册元数据和URI1.2.1、构建URI并写入Disruptor1.2.2、构建元数据并写入Disruptor1.2.…

GDPU 数据结构 天码行空14

实验十四 查找算法的实现 一、【实验目的】 1、掌握顺序排序&#xff0c;二叉排序树的基本概念 2、掌握顺序排序&#xff0c;二叉排序树的基本算法&#xff08;查找算法、插入算法、删除算法&#xff09; 3、理解并掌握二叉排序数查找的平均查找长度。 二、【实验内容】 …

GO的sql注入盲注脚本

之间学习了go的语法 这里就开始go的爬虫 与其说是爬虫 其实就是网站的访问如何实现 因为之前想通过go写sql注入盲注脚本 发现不是那么简单 这里开始研究一下 首先是请求网站 这里貌似很简单 package mainimport ("fmt""net/http" )func main() {res, …

【算法与数据结构】332、LeetCode重新安排行程

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题比较属于困难题目&#xff0c;难点在于完成机票、出发机场和到达机场之间的映射关系&#xff0c;再…

零信任 SASE 办公安全解决方案:提升企业网络安全与灵活性

​零信任 SASE&#xff08;Secure Access Service Edge&#xff09;办公安全解决方案为企业带来了许多好处&#xff0c;相较于以前的解决方案有明显差异。这个方案的出现是为了应对企业面临的新的网络安全挑战和远程办公的需求。 1、统一的网络安全管理&#xff1a;SASE 将网络…

【MySQL学习之基础篇】SQL

文章目录 1. SQL的通用语法2. SQL 分类3. 数据定义语言&#xff08;DDL&#xff09;3.1. 数据库操作3.2. 表操作3.2.1. 数据类型3.2.2. 表的创建和查询操作3.2.3. 应用案例3.2.3. 表的修改操作3.2.4. 表的删除操作 4. 数据操作语言(DML)4.1. 添加数据4.2. 修改数据4.3. 删除数据…

基于python实现原神那维莱特开转脚本

相信不少原友都抽取了枫丹大C那维莱特&#xff0c;其强力的输出让不少玩家爱不释手。由于其转的越快&#xff0c;越不容易丢伤害的特点&#xff0c;很多原友在开转时容易汗流浃背&#xff0c;所以特意用python写了一个自动转圈脚本&#xff0c;当按住鼠标侧键时&#xff0c;即可…