socket.io分房间交流

基本详情看这里

Socket.IO 是一个库,可以在客户端和服务器之间实现 低延迟双向 和 基于事件的 通信.

效果展示

安装依赖

// 后端插件安装
npm i socket.io -S
// 前端插件安装
npm i socket.io-client -S

前端搭建及逻辑

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import io from 'socket.io-client';

const username = ref('');
const socket = io('http://192.168.1.92:3000');
const val = ref('');
const messages = ref([]);
const isUsernameConfirmed = ref(false);
const room = ref('');
const userList = ref([]);
const messageContainer = ref(null);

const confirmUsername = () => {
    if (!username.value) {
        alert('请输入用户名');
        return;
    }
    isUsernameConfirmed.value = true;
};

const joinRoom = () => {
    if (room.value.trim().length === 0) {
        return; // 禁止加入空房间
    }
    if (!room.value) {
        alert('请输入房间号');
        return;
    }
    socket.emit('joinRoom', JSON.stringify({ username: username.value, room: room.value }));
};

const sendMessage = () => 

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

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

相关文章

机器学习 | 卷积神经网络

机器学习 | 卷积神经网络 实验目的 采用任意一种课程中介绍过的或者其它卷积神经网络模型&#xff08;例如LeNet-5、AlexNet等&#xff09;用于解决某种媒体类型的模式识别问题。 实验内容 卷积神经网络可以基于现有框架如TensorFlow、Pytorch或者Mindspore等构建&#xff…

Vue2脚手架配置教程IDEA配置VUE

5.12.3 Vue Cli 文档地址: https://cli.vuejs.org/zh/ IDEA 打开项目&#xff0c;运行项目

React 原理

函数式编程 纯函数 reducer 必须是一个纯函数&#xff0c;即没有副作用的函数&#xff0c;不修改输入值&#xff0c;相同的输入一定会有相同的输出不可变值 state 必须是不可变值&#xff0c;否则在 shouldComponentUpdate 中无法拿到更新前的值&#xff0c;无法做性能优化操作…

Linux网络服务部署yum仓库

目录 一、网络文件 1.1.存储类型 1.2.FTP 文件传输协议 1.3.传输模式 二、内网搭建yum仓库 一、网络文件 1.1.存储类型 直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff0…

服务拆分及远程调用

分布式架构都离不开服务的拆分&#xff0c;微服务也是一样。 1.微服务拆分 不同微服务&#xff0c;不要重复开发相同业务 微服务数据独立&#xff0c;不要访问其它微服务的数据库 微服务可以将自己的业务暴露为接口&#xff0c;供其它微服务调用 2.远程调用 以前时&#xf…

Halcon提取亚像素轮廓edges_sub_pix算子

Halcon提取亚像素轮廓edges_sub_pix算子 最常用的提取亚像素轮廓的算子是edges_sub_pix算子&#xff0c;该算子同样提供了大量的提取方法&#xff0c;只需要在Filter 参数中设置方法的名字&#xff0c;就可以完成边缘的提取。该算子的输入是灰度图像&#xff0c;输出是XLD轮廓…

BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)

一、介绍 BurpSuite是渗透测试、漏洞挖掘以及Web应用程序测试的最佳工具之一&#xff0c;是一款用于攻击web 应用程序的集成攻击测试平台&#xff0c;可以进行抓包、重放、爆破&#xff0c;包含许多工具&#xff0c;能处理对应的HTTP消息、持久性、认证、代理、日志、警报。 …

使用scipy处理图片——滚动图片

大纲 常规模式constant和grid-constant 交换模式wrap和grid-wrap 镜像reflect、mirror和grid-mirror 最近值nearest 代码 在《使用numpy处理图片——滚动图片》一文中&#xff0c;我们介绍了numpy的roll方法&#xff0c;它只能让超出区域的元素回到被移动的区域中&#xff0c;如…

图像提取大师:轻松从指定时长中获取某帧的图片,视频剪辑方法

在数字媒体时代&#xff0c;视频和图像已成为生活中不可或缺的部分。要从视频中提取某一帧作为图片&#xff0c;或者在视频剪辑时要采用其他的方法来达到需求的效果。下面来看云炫AI智剪如何轻松地从指定时长的视频中获取某帧的图片&#xff0c;视频剪辑的新方法。 视频中按指定…

Spring Cloud中的提供者与消费者

在服务调用关系中&#xff0c;会有两个不同的角色&#xff1a; 服务提供者&#xff1a;一次业务中&#xff0c;被其它微服务调用的服务。&#xff08;提供接口给其它微服务&#xff09; 服务消费者&#xff1a;一次业务中&#xff0c;调用其它微服务的服务。&#xff08;调用…

【竞技宝】DOTA2梦幻联赛 G2.iG让一追二击败Bright晋级败决!

北京时间2024年1月16日&#xff0c;DOTA2梦幻联赛S22中国区预选赛继续进行&#xff0c;本日首场比赛迎来G2.IG对阵Bright。本场比赛双方前两局战至1-1平&#xff0c;决胜局G2.iG monet的虚空在中期连续放出两个完美团战帮助G2.iG奠定胜势&#xff0c;最终G2.iG让一追二击败Brig…

Java 基础 - 06 List 之 Stack 以及List的相关总结

Java的栈&#xff0c;算是我们在Java中常见的一种数据结构&#xff0c;他遵循先进后出的原则&#xff08;Last-In-First-Out&#xff0c;LIFO&#xff09;的原则&#xff0c;在Java中&#xff0c;Stack是通过继承自Vector类实现的。 如上图所示&#xff0c;我们的stack继承自Ve…

el-table右固定最后一列显示不全或者是倒数第二列无边框线

问题图片&#xff1a; 解决方式1&#xff1a; >>>.el-table__row td:not(.is-hidden):last-child { border-left:1px solid #EBEEF5; } >>>.el-table__header th:not(.is-hidden):last-child{ border-left:1px solid #EBEEF5; } >>>.el-table__head…

苹果传拟移除Apple Watch血氧侦测功能 | 百能云芯

近日传来消息&#xff0c;苹果公司正考虑对部分型号的Apple Watch进行调整&#xff0c;可能会移除血氧侦测功能&#xff0c;以规避美国国际贸易委员会&#xff08;ITC&#xff09;在去年10月做出的禁售令决定。这一决定的背后是因为两款苹果智能手表&#xff0c;即Apple Watch …

Idea变量前面自动加final取消

本方式适用于点击 CtrlAltV获取方法返回值时&#xff0c;自动在变量前面加final 的情况。 每次都会生成final&#xff0c;删了自己挺麻烦&#xff0c;在网上搜了几个办法也不行。后来无意中看到下面这个。 通过AltShiftO调出弹出菜单 发现Declare final默认是选中&#xff0c;取…

【华为 ICT HCIA eNSP 习题汇总】——题目集1

1、&#xff08;多选&#xff09;根据下面所示的命令输出&#xff0c;下列描述中正确的是&#xff1f; A、GigabitEthernet0/0/1 允许VLAN1通过 B、GigabitEthernet0/0/1 不允许VLAN1通过 C、如果要把 GigabitEthernet0/0/1 变为 Access 端口&#xff0c;首先 需要使用命令“un…

云卷云舒:2024数据库发展趋势预测-长图版

云计算和大数据时代对数据库提出了更高的要求&#xff0c;需要支持大规模数据存储和处理。 数据库需要具备分布式和并行计算能力&#xff0c;以满足高性能和可扩展性的需求。新型数据库技术如NewSQL和分布式数据库成为云计算和大数据时代的趋势。 注&#xff1a;本文为chatGPT配…

docker下载时报错 /usr/local/bin/docker-compose: 1: cannot open html: No such file

docker 下载时报错 /usr/local/bin/docker-compose: 1: cannot open html: No such file /usr/local/bin/docker-compose: 2: Syntax error: redirection unexpected&#xff0c; 在网上查找了一些解决方法都不对&#xff0c;最后&#xff0c;通过删除/usr/local/bin/docker-co…

一文教你使用 ChatGPT API function calling

一文教你使用 ChatGPT API function calling Function call如何理解Function call如何调用&#xff1f; Function call 如何理解Function call 函式呼叫(function calling) 可说是这次ChatGPT API 更新的杀手级更新。所谓函式呼叫&#xff0c;就是让你把外部函式的形状写入Cha…

win下安装tensorflow

1首先ctrlaltdelete打开任务管理器查看GPU型号 2或者右键我的电脑然后如下方式查看显卡发现没有navida没有GPU