webSocket入门小案例（搭建实时交互的群聊+点对点的交流）

2023-12-31 22:58
文章标签 入门 搭建 实时 websocket 案例 交互 交流 群聊 点对点

本文主要是介绍webSocket入门小案例（搭建实时交互的群聊+点对点的交流），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

二、添加依赖

        <!--websocket--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!--前端框架sockjs-client--><dependency><groupId>org.webjars</groupId><artifactId>sockjs-client</artifactId><version>1.1.2</version></dependency><!--前端框架jquery--><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.4.1</version></dependency><!--前端框架stomp-websocket--><dependency><groupId>org.webjars</groupId><artifactId>stomp-websocket</artifactId><version>2.3.3</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>webjars-locator-core</artifactId></dependency><!--点对点通信需要用到的依赖 主要是为了获取安全登录的用户信息--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency>

三、创建websocketConfig文件 

@Configuration
@EnableWebSocketMessageBroker //启动websocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Override public void configureMessageBroker(MessageBrokerRegistry registry) {//注册代理对象 /topic 用于群聊广播 ; /user 用于点对点用户通信registry.enableSimpleBroker("/topic","/user"); //全局客户端使用的前缀registry.setApplicationDestinationPrefixes("/app");//点对点使用的前缀 无需配置 默认/user//registry.setUserDestinationPrefix("/user");}//注册stomp端点@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {//允许使用socketJs方式访问 即可通过http://IP:PORT/chat来和服务端websocket连接registry.addEndpoint("/chat").setAllowedOrigins("*").withSockJS();}
}

 配置SecurityConfig

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {@BeanPasswordEncoder passwordEncoder() {return NoOpPasswordEncoder.getInstance();}@Overrideprotected void configure(AuthenticationManagerBuilder auth) throws Exception {auth.inMemoryAuthentication().withUser("java").password("123").roles("admin").and().withUser("four").password("123").roles("user");}@Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().anyRequest().authenticated().and().formLogin().permitAll();}
}

 

三、创建接受数据的实体类

 Message：群聊中消息的封装；广播的内容为什么用户发送了什么内容

public class Message {private String name;private String content;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}
}

 Chat：点对点用户的通信

public class Chat {private String from; //发送消息的用户private String content; //消息的内容private String to; // 接收消息的用户public String getFrom() {return from;}public void setFrom(String from) {this.from = from;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}public String getTo() {return to;}public void setTo(String to) {this.to = to;}
}

四、controller

简单说一下Principal principal这个类  在spring security 的环境下登录后 用户的认证信息会由框架自动封装在Principal中

@Controller
public class GreetingController {@AutowiredSimpMessagingTemplate simpMessagingTemplate;
//    @MessageMapping("/hello")
//    @SendTo("/topic/greetings")
//    public Message greeting(Message message) {
//        return message;
//    }//群聊广播的接口@MessageMapping("/hello")public void greeting(Message message) {simpMessagingTemplate.convertAndSend("/topic/greetings", message);}//单聊的接口@MessageMapping("/chat")public void chat(Principal principal, Chat chat) {chat.setFrom(principal.getName());simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/user/chat", chat);}
}

五、前端简易页面实现

群聊：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群聊</title><!--前端框架 --><script src="/webjars/jquery/jquery.min.js"></script><script src="/webjars/sockjs-client/sockjs.min.js"></script><script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body><table><tr><td>请输入用户名</td><td><input type="text" id="name"></td></tr><tr><td><input type="button" id="connect" value="连接"></td><td><input type="button" id="disconnect" disabled="disabled" value="断开连接"></td></tr>
</table>
<div id="chat" style="display: none"><table><tr><td>请输入聊天内容</td><td><input type="text" id="content"></td><td><input type="button" id="send" value="发送"></td></tr></table><div id="conversation">群聊进行中...</div>
</div>
<script>$(function () {$("#connect").click(function () {connect();})$("#disconnect").click(function () {if (stompClient != null) {stompClient.disconnect();}setConnected(false);})$("#send").click(function () {stompClient.send('/app/hello',{},JSON.stringify({'name':$("#name").val(),'content':$("#content").val()}))})})var stompClient = null;function connect() {if (!$("#name").val()) {return;}var socket = new SockJS('/chat');stompClient = Stomp.over(socket);stompClient.connect({}, function (success) {setConnected(true);stompClient.subscribe('/topic/greetings', function (msg) {showGreeting(JSON.parse(msg.body));});})}function showGreeting(msg) {$("#conversation").append('<div>' + msg.name + ':' + msg.content + '</div>');}function setConnected(flag) {$("#connect").prop("disabled", flag);$("#disconnect").prop("disabled", !flag);if (flag) {$("#chat").show();} else {$("#chat").hide();}}
</script>
</body>
</html>

单聊：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单聊</title><script src="/webjars/jquery/jquery.min.js"></script><script src="/webjars/sockjs-client/sockjs.min.js"></script><script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body>
<input type="button" id="connect" value="连接">
<input type="button" id="disconnect" disabled="disabled" value="断开连接">
<hr>
消息内容：<input type="text" id="content">目标用户：<input type="text" id="to"><input type="button" value="发送" id="send">
<div id="conversation"></div>
<script>$(function () {$("#connect").click(function () {connect();})$("#disconnect").click(function () {if (stompClient != null) {stompClient.disconnect();}setConnected(false);})$("#send").click(function () {stompClient.send('/app/chat', {}, JSON.stringify({'to': $("#to").val(),'content': $("#content").val()}))})})var stompClient = null;function connect() {var socket = new SockJS('/chat');stompClient = Stomp.over(socket);stompClient.connect({}, function (success) {setConnected(true);stompClient.subscribe('/user/chat', function (msg) {showGreeting(JSON.parse(msg.body));});})}function showGreeting(msg) {$("#conversation").append('<div>' + msg.from + ':' + msg.content + '</div>');}function setConnected(flag) {$("#connect").prop("disabled", flag);$("#disconnect").prop("disabled", !flag);if (flag) {$("#chat").show();} else {$("#chat").hide();}}
</script>
</body>
</html>

这篇关于webSocket入门小案例（搭建实时交互的群聊+点对点的交流）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/557373。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
搭建Kafka+zookeeper集群调度

搭建Kafka+zookeeper集群调度

前言 硬件环境 172.18.0.5        kafkazk1        Kafka+zookeeper                Kafka Broker集群 172.18.0.6        kafkazk2        Kafka+zookeeper                Kafka Broker集群 172.18.0.7        kafkazk3
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
客户案例：安全海外中继助力知名家电企业化解海外通邮困境

客户案例：安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司（以下简称“格兰仕”），成立于1978年，是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地，格兰仕拥有多项国际领先的家电制造技术，连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展，更重视业务流程的高效与顺畅，以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施，其海外业务快速增长，电子邮件成为了关键的沟通工具。
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2