用uniapp 及socket.io做一个简单聊天app 2
在这里只有群聊,二个好友聊天,可以认为是建了一个二人的群聊。
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors'); // 引入 cors 中间件const app = express();
const server = http.createServer(app);
const io = socketIo(server, {cors: {origin: "*", // 允许所有来源methods: ["GET", "POST"]}
});// 使用 cors 中间件
app.use(cors());const port = 3000;
const groups = {};io.on('connection', (socket) => {console.log('New user connected');// 用户加入群组socket.on('joinGroup', ({ groupName, userName }) => {socket.join(groupName);groups[socket.id] = { groupName, userName };socket.to(groupName).emit('message', `${userName} has joined the group`);console.log(`${userName} joined group ${groupName}`);});// 发送消息socket.on('sendMessage', ({ groupName, message, userName }) => {io.to(groupName).emit('message', `${userName}: ${message}`);console.log(`Message sent to ${groupName}: ${userName}: ${message}`);});// 踢人socket.on('kickUser', ({ groupName, userName }) => {for (let id in groups) {if (groups[id].userName === userName && groups[id].groupName === groupName) {io.sockets.sockets.get(id).leave(groupName);io.to(groupName).emit('message', `${userName} has been kicked from the group`);console.log(`${userName} was kicked from group ${groupName}`);break;}}});// 用户断开连接socket.on('disconnect', () => {if (groups[socket.id]) {const { groupName, userName } = groups[socket.id];socket.to(groupName).emit('message', `${userName} has left the group`);delete groups[socket.id];console.log(`${userName} left group ${groupName}`);}});
});server.listen(port, () => {console.log(`Server running on port ${port}`);
});
uniapp的界面
<template><view class="container"><view><input v-model="userName" placeholder="用户名"/><input v-model="groupName" placeholder="群名"/><button @click="joinGroup">加入群</button><button @click="kickUser">踢人</button></view><view><view id="messages"><view v-for="(msg, index) in messages" :key="index">{{ msg }}</view></view><input v-model="message" placeholder="输入聊天"/><button @click="sendMessage">聊天</button></view></view>
</template><script>
import io from 'socket.io-client';export default {data() {return {socket: null,userName: 'wanghaibin',groupName: 'wanghaibin',message: '',messages: []};},onLoad() {this.socket = io('http://127.0.0.1:3000');this.socket.on('message', (msg) => {this.messages.push(msg);});},methods: {joinGroup() {this.socket.emit('joinGroup', { groupName: this.groupName, userName: this.userName });},sendMessage() {if (this.message.trim() !== '') {this.socket.emit('sendMessage', { groupName: this.groupName, message: this.message, userName: this.userName });this.message = '';}},kickUser() {const userNameToKick = prompt('Enter the username to kick:');this.socket.emit('kickUser', { groupName: this.groupName, userName: userNameToKick });}}
};
</script><style>
.container {padding: 20px;
}
#messages {height: 300px;overflow-y: scroll;border: 1px solid #ccc;margin-bottom: 10px;
}
input {display: block;margin: 10px 0;
}
button {display: block;margin: 10px 0;
}
</style>
运行效果:
相关文章:
用uniapp 及socket.io做一个简单聊天app 2
在这里只有群聊,二个好友聊天,可以认为是建了一个二人的群聊。 const express require(express); const http require(http); const socketIo require(socket.io); const cors require(cors); // 引入 cors 中间件const app express(); const serv…...
Si24R03:高度集成的低功耗SOC芯片中文资料
Si24R03是一款高度集成的低功耗SOC芯片,具有低功耗、Low Pin Count、宽电压工作范围,集成了13/14/15/16位精度的 ADC、LVD、UART、SPI、I2C、TIMER、WUP、IWDG、RTC、无线收发器等丰富的外设。 合封说明:Si24R03为CSM32RV003和Si24R1的合封芯…...
K8s-控制器
一 为什么使用控制器 pod控制器 作用:1.pod类型资源删除,不会重建 2.控制器可以帮助用户监控,并保证节点上运行定义好的pod副本数 3.pod超过或低于用户期望,控制器会创建、删除pod副本数量 控制器类型&am…...
Meta 发布 LLAMA 3.1;特斯拉无人出租车推迟至 10 月;谷歌将向 Waymo 再投 50 亿美元
先瞧一下 Chat 和 Agent 的差异。 Chat(聊天):纯粹的 Chat,宛如一个主要由“大脑与嘴”组成的智能体,着重于信息处置和语言沟通。诸如 ChatGPT 这般的系统,其能够领会用户的询问,给出有益且连贯…...
C 语言基础概念总结
C 语言基础概念总结 一、数据类型 目录 C 语言基础概念总结 一、数据类型 基本数据类型 构造数据类型 二、变量与常量 三、运算符与表达式 算术运算符 关系运算符 逻辑运算符 赋值运算符 自增自减运算符 四、控制流语句 顺序结构 选择结构 循环结构 五、函数 …...
Django教程(000):初识Django
Django 是一个高级 Python Web 框架,旨在快速开发、简洁、实用。Django 提供了众多内置功能,使得开发者可以专注于编写应用程序的业务逻辑,而不需要过多关注底层细节。以下是 Django 的详细介绍: 1. Django 简介 Django 是一个开放源代码的 Web 框架,由 Python 编写,最…...
SQLynx数据库管理工具
背景:业主对网络安全要求比较高,不提供VPN等远程工具,也不能开放3306端口到互联网。那怎么样运维数据库就是个难题?找到了SQLynx这个可以网页访问的数据库管理工具,给大家分享一下。 1.介绍 SQLynx原名SQL Studio&…...
Java基础06:变量,常量,作用域(狂神说Java)
一.变量 有了static,即类变量,就可以不用new了可以直接调用,类变量之后再细讲 二.常量 三.变量的命名规范...
inflight 守恒建模
去上海博物馆参观古埃及文物展,人太多,体验很差,我可以当讲解员的,但没人听,都只为拍照发圈。 平心而论,老家殷墟可与之一战,建议将殷墟交给国家运营,而不是一个地级市文旅。 无心…...
HarmonyOS NEXT星河版零基础入门到实战
文章目录 一、HarmonyOS NEXT介绍学习内容1、鸿蒙APP开发2、能力套件开发3、全场景开发适合人群 持续更新中✒️总结 一、HarmonyOS NEXT介绍 放弃安卓框架之后,HarmonyOS NEXT成为真正独立于安卓、iOS的操作系统,堪称是一场史无前例的脱胎换骨。在其众多…...
测试开发面试题---JVM
JAVA的内存区域 程序计数器:线程私有的,保存当前线程的字节码文件。JAVA虚拟机栈:包含局部变量信息,用于方法的调用和执行。本地方法栈:与JAVA虚拟机栈类似,但只服务于本地方法。堆:所有线程共…...
python库 - jsonpath
JSONPath 是一种用于从 JSON 数据中提取数据的查询语言,类似于 XML 中的 XPath。它允许通过路径表达式来导航和查询 JSON 结构中的数据。JSONPath 在处理 API 响应、配置文件和复杂数据结构时非常有用。 以下是一些常用的 JSONPath 表达式及其功能: $&…...
[RK3588][Android12] Android->OTA包超过4个G导致打包失败
测试平台 Platform: RK3588 OS: Android12 问题说明: 有的客户需要往系统中内置大量apk,这样就导致最终打包的OTA包超过4个G,从而导致打包OTA的时候报错:Zipfile size would require ZIP64 extensions 解决方法: 可能…...
(雷达数据处理中的)跟踪算法(3) – 可用于目标跟踪实践的数据集介绍解析
说明 本博文作为跟踪算法系列博文的第3篇,对可用于目标跟踪的一份数据集进行了介绍,本文介绍的这份数据集将用于后续博文的目标跟踪实践。读者在阅读本博文前,建议先看看本系列的第一篇博文[1]:(雷达数据处理中的)跟踪…...
【C语言报错已解决】Use of Uninitialized Variable
🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引言: 在编程中,未初始化的变量是一个常见的问题,它可能导致程序的行为变得不可预测。未初…...
3 Go语言的变量声明
本专栏将从基础开始,循序渐进,由浅入深讲解Go语言,希望大家都能够从中有所收获,也请大家多多支持。 查看相关资料与知识库 专栏地址:Go专栏 如果文章知识点有错误的地方,请指正!大家一起学习,…...
PyMySQL库的使用方法
过程和步骤: 安装 PyMySQL 首先,需要使用 pip 安装 PyMySQL 库: pip install pymysql连接数据库 使用 PyMySQL.connect() 方法可以建立到 MySQL 数据库的连接: import pymysql# 配置数据库连接参数 config {host: localhost…...
iOS 创建一个私有的 CocoaPods 库
创建一个私有的 CocoaPods 库(pod)涉及几个步骤,包括设置私有的 Git 仓库、创建 Podspec 文件、发布到私有仓库等等。以下是详细步骤: 设置私有 Git 仓库 首先,在 GitHub、GitLab 或 Bitbucket 上创建一个新的私有仓库…...
Linux_实现UDP网络通信
目录 1、实现服务器的逻辑 1.1 socket 1.2 bind 1.3 recvfrom 1.4 sendto 1.5 服务器代码 2、实现客户端的逻辑 2.1 客户端代码 3、实现通信 结语 前言: 在Linux下,实现传输层协议为UDP的套接字进行网络通信,网络层协议为IPv4&am…...
C# 代理模式
栏目总目录 概念 代理模式是一种结构型设计模式,它为其他对象提供一种代理以控制对这个对象的访问。在代理模式中,我们创建一个具有现有对象(称为“真实对象”或“被代理对象”)相同功能的代理对象。代理对象可以在客户端和目标对…...
【1】Python机器学习之基础概念
1、什么是机器学习 最早的机器学习应用——垃圾邮件分辨 传统的计算机解决问题思路: 编写规则,定义“垃圾邮件”,让计算机执行对于很多问题,规则很难定义规则不断变化 机器学习在图像识别领域的重要应用: 人脸识别…...
HashMap源码解析
目录 一:put方法流程 二:get方法 三:扩容机制 一:put方法流程 public V put(K key, V value) {return putVal(hash(key), key, value, false, true); }final V putVal(int hash, K key, V value, boolean onlyIfAbsent,boolean evict) {No…...
[Javascript】前端面试基础3【每日学习并更新10】
Web开发中会话跟踪的方法有那些 cookiesessionurl重写隐藏inputip地址 JS基本数据类型 String:用于表示文本数据。Number:用于表示数值,包括整数和浮点数。BigInt:用于表示任意精度的整数。Boolean:用于表示逻辑值…...
C++自定义字典树结构
代码 #include <iostream> using namespace std;class TrieNode { public:char data;TrieNode* children[26];bool isTerminal;TrieNode(char ch){data ch;for (int i 0; i < 26; i){children[i] NULL;}isTerminal false;} }; class Trie { public:TrieNode* ro…...
dockerfile部署wordpress
1.将容器直接提交成镜像 [rootlocalhost ~]# docker commit 8ecc7f6b9c12 nginx:1.1 sha256:9a2bb94ba6d8d952527df616febf3fbc8f842b3b9e28b7011b50c743cd7b233b [rootlocalhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE nginx …...
CSS(二)——CSS 背景
CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 背景属性 Property描述background简写属性,作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把…...
开机出现grub无法进入系统_电脑开机出现grub解决方法
最近有小伙伴问我电脑开机出现grub无法进入系统怎么回事?电脑开机出grub的情况有很多,电脑上安装了Linux和Win10双系统,但是由于格式化删除了Linux之后,结果win10开机了之后,直接显示grub>,无法…...
uboot 设置bootargs配置内核网络挂载根文件系统
uboot 设置bootargs配置内核网络挂载根文件系统 uboot设置bootargs env set bootargs "mem256M consolettyAMA0,115200 root/dev/nfs init/linuxrc nfsrootnfs主机地址:nfs路径/busybox/rootfs_glibc_arm64,prototcp rw nfsvers3 rootwait ip板子地址:nfs主机地址:网关:2…...
Vue3+.NET6前后端分离式管理后台实战(三十一)
1,Vue3.NET6前后端分离式管理后台实战(三十一)...
22集 如何minimax密钥和groupid-《MCU嵌入式AI开发笔记》
22集 如何获取minimax密钥和groupid-《MCU嵌入式AI开发笔记》 minimax密钥获取 https://www.minimaxi.com/platform 进入minimax网站,注册登录后,进入“账户管理”, 然后再点击“接口密钥”,然后再点击“创建新的密钥”。 之…...
决策树的概念
决策树的概念 决策树是一种监督学习算法,主要用于分类任务。它通过构建一棵树结构模型来进行预测,其中每个内部节点表示一个特征属性上的判断条件,每条边代表一个判断结果对应的分支,而叶节点则代表最终的类别标签。 应用领域 …...
C++《类和对象》(中)
一、 类的默认成员函数介绍二、构造函数 构造函数名与类同名内置类型与自定义类型析构函数拷贝构造函数 C《类和对象》(中) 一、 类的默认成员函数介绍 默认成员函数就是⽤⼾没有显式实现,编译器会⾃动⽣成的成员函数称为默认成员函数。 那么我们主要学习的是1&…...
SpringBoot中JSR303校验
JSR是 Java EE 的一种标准,用于基于注解的对象数据验证。在Spring Boot应用中,你可以通过添加注解直接在POJO类中声明验证规则。这样可以确保在使用这些对象进行操作之前,它们满足业务规则。个人认为非常有用的,因为它减少了代码中…...
图像数据增强方法概述
图像数据增强方法概述 1. 什么是图像数据增强技术?2. 图像数据增强技术分类2.1 几何变换Python 示例代码 2.2 颜色变换2.3 噪声添加 3. 参考文献 1. 什么是图像数据增强技术? 基础概念:图像增强技术是计算机视觉和图像处理领域中的一个关键技术,主要用…...
【学习笔记】无人机系统(UAS)的连接、识别和跟踪(五)-无人机跟踪
目录 引言 5.3 无人机跟踪 5.3.1 无人机跟踪模型 5.3.2 无人机位置报告流程 5.3.3 无人机存在监测流程 引言 3GPP TS 23.256 技术规范,主要定义了3GPP系统对无人机(UAV)的连接性、身份识别、跟踪及A2X(Aircraft-to-Everyth…...
分享从零开始学习网络设备配置--任务6.1 实现计算机的安全接入
项目描述 随着网络技术的发展和应用范围的不断扩大,网络已经成为人们日常生活中必不可少的一部分。园区网作为给终端用户提供网络接入和基础服务的应用环境,其存在的网络安全隐患不断显现出来,如非人为的或自然力造成的故障、事故;…...
双向链表(C语言版)
1. 双向链表的结构 注意:这里的“带头”跟单链表的“头结点”是两个概念,实际上在单链表阶段称呼不太严谨,但是为了更好地理解就直接称为单链表的头结点。带头链表里的头结点,实际为“哨兵位”,哨兵位结点不存储任何有…...
【算法/学习】前缀和差分
前缀和&&差分目录 1. 前缀和的概念及作用 🌈概念 🌈用途 🌙一维前缀和 🌙二维前缀和 2. 差分的概念及用途 🌈概念: 🌈用途 🌙一维差分 🌙二维差分 1. …...
idea Project 不显示文件和目录
idea Project 不显示文件和目录 File - Close Project - 重新打开项目即可删除.idea文件夹,重新打开项目即可。 原因分析: 可能与使用不同ide例如java、python打开同一项目有关 参考: https://blog.csdn.net/hgnuxc_1993/article/details/132595900 解决打开IDE…...
Linux--Socket编程预备
目录 1. 理解源 IP 地址和目的 IP 地址 2.端口号 2.1端口号(port)是传输层协议的内容 2.2端口号范围划分 2.3理解 "端口号" 和 "进程 ID" 2.4理解 socket 3.传输层的典型代表 3.1认识 TCP 协议 3.2认识 UDP 协议 4. 网络字节序 5. socket 编程接…...
100个python的基本语法知识【下】
50. 压缩文件: import zipfilewith zipfile.ZipFile("file.zip", "r") as zip_ref:zip_ref.extractall("extracted")51. 数据库操作: import sqlite3conn sqlite3.connect("my_database.db") cursor conn.c…...
Git如何将一个分支上的修改转移到另一个分支
在我们使用git进行版本控制时,当代码写错分支,怎么将这些修改转移到正确的分支上去呢?这时,我们可以使用git stath命令来暂存我们的修改,然后再切换到其他分支 未commit(提交)操作时 1. 先将修…...
jvm-证明cpu指令是乱序执行的案例
package jvm;/*** 证明cpu指令是乱序执行的** author 1* version 1.0* description: TODO* date 2024-07-19 9:31*/ public class T04_Disorder {private static int x 0, y 0;private static int a 0, b 0;public static void main(String[] args) throws InterruptedExcep…...
《流程引擎原理与实践》开源电子书
流程引擎原理与实践 电子书地址:https://workflow-engine-book.shuwoom.com 第一部分:流程引擎基础 1 引言 1.1 流程引擎介绍 1.2 流程引擎技术的发展历程 1.3 相关产品国内外发展现状 1.4 本书的内容和结构安排 2 概念 2.1 基础概念 2.2 进阶…...
谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改
文章目录 一,52-商品服务-API-三级分类-新增-新增效果完成1,点击Append按钮,显示弹窗2,测试完整代码 二,53-商品服务-API-三级分类-修改-修改效果完成1,添加Edit按钮并绑定事件2,修改弹窗确定按…...
uni-app 影视类小程序开发从零到一 | 开源项目分享
引言 在数字娱乐时代,对于电影爱好者而言,随时随地享受精彩影片成为一种日常需求。分享一款基于 uni-app 开发的影视类小程序。它不仅提供了丰富的影视资源推荐,还融入了个性化知乎日报等内容,是不错的素材,同时对电影…...
Python使用正则替换字符串
Python小技:使用正则替换字符串 java中有String.replaceAll()方法使用正则替换字符串, 在Python中,字符串也有一个replace方法,但是这个方法只能精准替换, 如果想正则替换,就要改成re.sub方法,而…...
每日一练,java03
目录 题目wait()、notify()和notifyAll()方法的特性和使用场景wait() 方法notify() 方法notifyAll() 方法使用场景 注意事项 题目 选自牛客网 1.下面关于JAVA的垃圾回收机制,正确的是( ) A.当调用“System.gc()”来强制回收时,系…...
【机器学习】深入理解损失函数(Loss Functions)
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 💫个人格言: "如无必要,勿增实体" 文章目录 深入理解损失函数(Loss Functions)什么是损失函数?常见损失函数类型1. 均方误差…...
python实现特征检测算法3
python实现SIFT(尺度不变特征变换)算法、SURF(Speeded Up Robust Features)算法 1.SIFT算法详解算法步骤Python实现详细解释优缺点应用领域2.SURF算法详解算法步骤Python实现详细解释SURF算法原理优缺点应用领域尺度不变特征变换(SIFT,Scale-Invariant Feature Transform…...