WebSocket基础——WebSocket的基本概念 VS Http SpringBoot整合WebSocket vue前端代码和效果展示

news2024/11/23 22:26:33

前言

WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议。它允许在单个TCP连接上进行双向通信，而不需要通过多个HTTP请求-响应循环来实现。相比传统的HTTP请求，WebSocket提供了更低的延迟和更高的实时性。

本篇博客介绍WebSocket的基本概念，与http的区别和联系，然后介绍SpringBoot整合WebSocket，以及vue前端代码和效果展示。

在这里插入图片描述

目录

  • 前言
  • 引出
  • WebSocket的使用
    • 认识websock
  • springboot整合websocket
    • 1.导入依赖
    • 2.配置文件和配置类
    • 3.自定义工具类
    • 4.controller层
    • 5.主启动类
  • vue前端代码
    • 效果演示
  • 总结

引出

1.WebSocket的基本概念，与http的区别和联系；
2.springboot整合WebSocket；
3.vue前端代码和效果展示；

WebSocket的使用

认识websock

WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议。它允许在单个TCP连接上进行双向通信，而不需要通过多个HTTP请求-响应循环来实现。相比传统的HTTP请求，WebSocket提供了更低的延迟和更高的实时性。

WebSocket协议通过在HTTP握手阶段升级连接来实现。一旦建立了WebSocket连接，客户端和服务器之间可以通过发送消息进行实时通信。这种双向通信的特性使得WebSocket非常适合实时聊天、实时数据更新、多人游戏等需要实时性的应用程序。

WebSocket协议是基于标准的TCP协议，可以在现代的Web浏览器和服务器上使用。它提供了一种更高效、更实时的通信方式，使得开发者能够构建更具交互性和实时性的Web应用程序。

WebSocket具有以下特点：

  1. 双向通信：WebSocket允许客户端和服务器之间进行双向通信，而不仅仅是单向的请求-响应模式。这使得实时数据的推送和实时更新变得更加容易。
  2. 实时性：WebSocket提供了低延迟和高实时性的通信，使得数据能够以更快的速度传输和处理。相比传统的HTTP请求，WebSocket减少了额外的开销和延迟。
  3. 较少的数据传输量：WebSocket使用较少的数据传输量，因为它使用二进制数据帧和压缩技术来减少数据的大小。这对于移动设备和网络带宽有限的环境非常有益。
  4. 长连接：WebSocket建立一次连接后可以保持长时间的连接状态，而不需要频繁地建立和关闭连接。这减少了服务器的负载和网络开销。
  5. 跨域支持：WebSocket支持跨域通信，允许在不同域名或不同端口之间进行通信。这为构建分布式系统和跨域应用提供了便利。
  6. 可扩展性：WebSocket协议是可扩展的，可以通过添加自定义的协议扩展来满足特定的需求。

WebSocket提供了一种更高效、更实时、更可靠的通信方式，使得开发者能够构建更具交互性和实时性的Web应用程序。

在这里插入图片描述

WebSocket和HTTP有以下区别和联系：

区别：

  1. 连接方式：HTTP是基于请求-响应模式的无状态协议，每次请求都需要建立一个新的连接。而WebSocket是一种长连接协议，通过一次握手后，客户端和服务器之间可以保持持久连接，实现双向通信。
  2. 数据传输方式：HTTP使用文本格式传输数据，而WebSocket可以使用文本或二进制格式传输数据。
  3. 通信效率：由于WebSocket使用长连接，减少了建立和关闭连接的开销，以及HTTP头部的重复传输，因此在实时性和通信效率上优于HTTP。

联系：

  1. 握手过程：WebSocket的握手过程是基于HTTP的，客户端和服务器之间首先进行HTTP握手，然后升级到WebSocket协议。
  2. 使用同一端口：WebSocket和HTTP可以共享同一端口，因为WebSocket的握手过程是基于HTTP的，所以可以通过HTTP的80端口或443端口进行通信。
  3. 兼容性：WebSocket协议是基于标准的TCP协议，可以在现代的Web浏览器和服务器上使用。与HTTP相比，WebSocket在兼容性方面更加广泛。

在这里插入图片描述

springboot整合websocket

在这里插入图片描述

1.导入依赖

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

2.配置文件和配置类

package com.tianju.webChat.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 {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}


server:
  port: 10065


logging:
  level:
    com.tianju.socket: debug

3.自定义工具类

在这里插入图片描述

package com.tianju.webChat.util;
import javax.websocket.RemoteEndpoint;
import javax.websocket.Session;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 聊天室的工具类
 */
public class WebSocketUtil {
    //放所有参与聊天的用户标识
    public static final Map<String, Session> messageMap = new ConcurrentHashMap<>();

    /**
     *单个消息
     */
    public static void send(Session session,String message){
        if (session != null){
            final RemoteEndpoint.Basic basic = session.getBasicRemote();
            if (basic != null){
                try {
                    basic.sendText(message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    /**
     * 全体发消息
     */
    public static void sendAll(String message){
        messageMap.forEach((userName,session) -> send(session,message));
    }
}

4.controller层

在这里插入图片描述

package com.tianju.webChat.controller;


import com.tianju.webChat.util.WebSocketUtil;
import org.springframework.web.bind.annotation.RestController;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;

@RestController
@ServerEndpoint("/WebSocketHandler/{userName}")


public class WebChatController {
    @OnOpen
    public void openSession(@PathParam("userName") String userName, Session session){
        String message = "欢迎:"+userName +"加入群聊";
        WebSocketUtil.messageMap.put(userName,session);
        //给所有人发消息
        WebSocketUtil.sendAll(message);

    }
    @OnMessage
    public void onMessage(@PathParam("userName") String userName, String message){
        message = userName +":" +message;
        WebSocketUtil.sendAll(message);
    }


    @OnClose
    public void onClose(@PathParam("userName") String userName,Session session){
        WebSocketUtil.messageMap.remove(userName);
        WebSocketUtil.sendAll("用户:"+userName+"离开聊天室");
        try {
            session.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

5.主启动类

在这里插入图片描述

package com.tianju.webChat;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.socket.config.annotation.EnableWebSocket;

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

vue前端代码

在这里插入图片描述

<template>
  <div>

    <el-row>
      <el-col :span="6" :offset="3">
        <p style="font-">真心聊天室</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="1"> <textarea id="textarea" disabled="disabled" cols="50" rows="10"></textarea></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span> 用户名：</span>
        <span> <el-input type="text" v-model="userName" /></span>
        <span> <el-button type="primary" @click="join">加入聊天室</el-button></span>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <span> 发消息：</span>
        <span> <el-input type="text" v-model="message" /></span>
        <span> <el-button type="success" @click="send">发送</el-button></span>
      </el-col>
    </el-row>


  </div>
</template>

<script>

export default {
  data() {
    return {
      url: 'ws://127.0.0.1:10065/WebSocketHandler/',
      ws: '',
      userName: '',
      message: ''
    }

  },
  methods: {
    join() {
      if (this.userName == "") {
        alert("请输入您的大名！")
      }
      this.ws = new WebSocket(this.url + this.userName);

      this.ws.onopen = function () {
        console.log("连接成功！")
      }

      this.ws.onmessage = function (result) {

        var textarea = document.getElementById("textarea");
        textarea.append(result.data + '\n');
        // 使textarea元素滚动到底部，显示最后一行文本
        textarea.scrollTop = textarea.scrollHeight;
      }

      this.ws.onclose = function () {
        var textarea = document.getElementById("textarea");
        textarea.append('用户：' + this.userName + '离开聊天室 \n');
        console.log("")
      }

    },
    send() {
      if (this.ws != null) {
        this.ws.send(this.message);
        this.message = "";
      }
    }
  }
}
</script>

<style scoped>
p {
  font-size: 20px;
  color: red;
}

.el-row {
  margin: 10px 5px;
}

span {
  float: left;
}</style>

效果演示

在这里插入图片描述

可以多人加入聊天

在这里插入图片描述

总结

1.WebSocket的基本概念，与http的区别和联系；
2.springboot整合WebSocket；
3.vue前端代码和效果展示；

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机网络（四）：网络层

计算机网络（四）：网络层

参考引用 计算机网络微课堂-湖科大教书匠计算机网络&#xff08;第7版&#xff09;-谢希仁 1. 网络层概述 网络层的主要任务是实现网络互连&#xff0c;进而实现数据包在各网络之间的传输 要实现网络层任务&#xff0c;需要解决以下主要问题 网络层向运输层提供怎样的服务 (“…
阅读更多...
基于SpringBoot的养老监护管理平台设计与实现(源码+lw+部署文档+讲解等)

基于SpringBoot的养老监护管理平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…
阅读更多...
解决Invalid bound statement (not found)错误~

解决Invalid bound statement (not found)错误~

报错如下所示&#xff1a; 找了好久&#xff0c;刚开始以为是名称哪里写的有问题&#xff0c;但仔细检查了好多遍都不是 最后发现了问题如下所示&#xff1a; UserMapper里面的内容被我修改了&#xff0c;但classes中的内容还是原来的内容&#xff0c;所以才导致了编译器报错n…
阅读更多...
Vue2详解

Vue2详解

Vue2 一、Vue快速上手 1.1什么是Vue 概念&#xff1a;Vue是一套构建用户界面的渐进式 框架 构建用户界面&#xff1a;基于数据渲染出用户可以看到的界面 渐进式&#xff1a;所谓渐进式就是循序渐进&#xff0c;不一定非得把Vue中所有的API都学完才能开发Vue&#xff0c;可以…
阅读更多...
【数据结构】红黑树(C++实现)

【数据结构】红黑树(C++实现)

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【数据…
阅读更多...
一篇博客学会系列（3） —— 对动态内存管理的深度讲解以及经典笔试题的深度解析

一篇博客学会系列（3） —— 对动态内存管理的深度讲解以及经典笔试题的深度解析

目录 动态内存管理 1、为什么存在动态内存管理 2、动态内存函数的介绍 2.1、malloc和free 2.2、calloc 2.3、realloc 3、常见的动态内存错误 3.1、对NULL指针的解引用操作 3.2、对动态开辟空间的越界访问 3.3、对非动态开辟内存使用free释放 3.4、使用free释放一块动态…
阅读更多...
接口测试入门实践

接口测试入门实践

简单接口搭建(表单/REST) 五步教会你写接口 首先要安装flask包: pip install flask 从flask中导入Flask类和request对象: from flask import Flask, request从当前模块实例化出一个Flask实例:appFlask(__name__)编写一个函数来处理请求 从请求对象中获取数据:arequest.values.…
阅读更多...
【test】文章测试

【test】文章测试

自定义文章测试 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注…
阅读更多...
【改进哈里鹰算法(NCHHO)】使用混沌和非线性控制参数来提高哈里鹰算法的优化性能，解决车联网相关的路由问题（Matlab代码实现）

【改进哈里鹰算法(NCHHO)】使用混沌和非线性控制参数来提高哈里鹰算法的优化性能，解决车联网相关的路由问题（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
嵌入式学习笔记（42）SD卡的编程接口

嵌入式学习笔记（42）SD卡的编程接口

8.3.1 SD卡的物理接口 SD卡由9个针脚与外界进行物理连接&#xff0c;这9个脚中有2个地&#xff0c;1个电源&#xff0c;6个信号线。 8.3.2 SD协议与SPI协议 (1)SD卡与SRAM/DDR/SROM之类的东西的不同&#xff1a;SRAM/DDR/SROM之类的存储芯片是总线式的&#xff0c;只要连接上…
阅读更多...
Docker部署Nginx-常用命令

Docker部署Nginx-常用命令

1.拉取 docker pull nginx 2. 查看镜像 docker images 3.保存镜像 docker save -o nginx.tar nginx:latest 4.删除镜像 docker rmi nginx:latest 5. 加载镜像 docker load -i nginx.tar 6. 运行Nginx docker run -d --name nginx -p 80:80 nginx 7.停掉Nginx容器 docker stop n…
阅读更多...
Android 活动Activity

Android 活动Activity

目录 一、启停活动页面1.1 Activity的启动和结束1.2 Activity的生命周期1.3 Activity的启动模式 二、在活动之间传递消息2.1 显式Intent和隐式Intent2.2 向下一个Activity发送数据2.3 向上一个Activity返回数据 三、补充附加信息3.1 利用资源文件配置字符串3.2 利用元数据传递配…
阅读更多...
操作系统--分页存储管理

操作系统--分页存储管理

一、概念介绍 分页存储&#xff1a;一是分内存地址&#xff0c;二是分逻辑地址。 1.分内存地址 将内存空间分为一个个大小相等的分区。比如&#xff0c;每个分区4KB。 每个分区就是一个“页框”&#xff0c;每个页框有个编号&#xff0c;即“页框号”&#xff0c;“页框号”…
阅读更多...
Linux【网络】数据链路层

Linux【网络】数据链路层

Linux【网络】数据链路层 数据链路层以太网帧格式对比理解MAC地址和IP地址ARP协议--地址解析协议ARP工作流程ARP请求ARP应答 其他协议DNS-域名解析协议ICMP--网络层协议NAT技术NAPT 正向代理与反向代理 数据链路层 数据链路层用于两个设备&#xff0c;同一数据链路节点之间的信…
阅读更多...
DPDK程序结合网络助手接收数据

DPDK程序结合网络助手接收数据

网络调试工具&#xff1a;https://download.csdn.net/download/hdsHDS6/88390999?spm1001.2014.3001.5503 DPDK代码&#xff1a; #include <stdio.h> #include <string.h> #include <rte_eal.h> #include <rte_ethdev.h> #include <rte_ip.h> …
阅读更多...
[管理与领导-112]：IT人看清职场中的隐性规则 - 9 - 付出与回报的关系：先付出，后回报，不行就止损，这才是职场价值交换的本质

[管理与领导-112]：IT人看清职场中的隐性规则 - 9 - 付出与回报的关系：先付出，后回报，不行就止损，这才是职场价值交换的本质

目录 一、职场中付出与回报的先后关系 二、付出与回报四象限模型 三、职场专业性的本质 一、职场中付出与回报的先后关系 在职场中&#xff0c;个人的付出和回报之间存在着先后关系。以下是按照先后关系划分的四种类型&#xff1a; 先付出后回报型&#xff0c;不回报&#…
阅读更多...
对进程的初步认识以及fork（）函数的理解

对进程的初步认识以及fork（）函数的理解

什么是进程 进程是什么呢&#xff1f;其实解释的通俗浅显一点就是我们运行到内存的程序。我们知道运行一个磁盘里的程序时&#xff0c;会将该程序先加载&#xff08;将磁盘的数据拷贝&#xff09;到内存当中&#xff0c;因此该程序就可以称为一个进程。首先我们以Windows操作…
阅读更多...
特斯拉被称为自动驾驶领域的苹果

特斯拉被称为自动驾驶领域的苹果

特斯拉的自动驾驶技术无疑是居于世界上领先地位的，有人形容特斯拉是自动驾驶汽车领域的苹果。特斯拉发布的Tesla Vision系统只配备了摄像头，不依靠雷达。 这并不是特斯拉唯一和其它对手不同的地方，他们的整个战略都是基于车队和销售产品，而其大多数竞争对手则销售自…
阅读更多...
ENVI报错：SaveRasterFile failed:IDLnaMetadata Error

ENVI报错：SaveRasterFile failed:IDLnaMetadata Error

ENVI报错&#xff1a;SaveRasterFile failed:IDLnaMetadata Error 问题描述 ENVI在另存为为TIFF文件时&#xff0c;报了下面这个错误信息 原因 输出路径或者是存放影像的路径里面包含中文&#xff0c;不能包含中文 解决方案 把所有相关路径中的中文改成英文
阅读更多...
【第十四届蓝桥杯单片机组】学习笔记（5）：PCF8591( AD/DA芯片)

【第十四届蓝桥杯单片机组】学习笔记（5）：PCF8591( AD/DA芯片)

目录 概述功能字芯片寻址控制字A/D转换单通道读取多通道读取 概述 芯片通信方式&#xff1a;IICAIN0&#xff0c;AIN1&#xff0c;AIN2&#xff0c;AIN3&#xff1a;(Analog signal In) 模拟信号输入AOUT&#xff1a;模拟信号输出 功能字 芯片寻址 这是在比赛提供的PCF8591芯…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023