用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>

运行效果:在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode—426. 将二叉搜索树转化为排序的双向链表【中等】Plus

2024每日刷题&#xff08;148&#xff09; Leetcode—426. 将二叉搜索树转化为排序的双向链表 实现代码 /* // Definition for a Node. class Node { public:int val;Node* left;Node* right;Node() {}Node(int _val) {val _val;left NULL;right NULL;}Node(int _val, Nod…

R包:plot1cell单细胞可视化包

介绍 plot1cell是用于单细胞数据seurat数据对象的可视化包。 安装 ## You might need to install the dependencies below if they are not available in your R library. bioc.packages <- c("biomaRt","GenomeInfoDb","EnsDb.Hsapiens.v86&qu…

无人机之起飞前准备

一、检查无人机状态 1、确保无人机的电池充满电或有足够的电量&#xff1b; 2、检查螺旋桨是否安装牢固&#xff0c;没有损坏&#xff1b; 3、确认无人机的固件是最新版本&#xff0c;以保证拥有最新的功能和修正。 二、选择合适的起飞地点 1、避免在人群密集或有障碍物的…

MySQL:增删改查、临时表、授权相关示例

目录 概念 数据完整性 主键 数据类型 精确数字 近似数字 字符串 二进制字符串 日期和时间 MySQL常用语句示例 SQL结构化查询语言 显示所有数据库 显示所有表 查看指定表的结构 查询指定表的所有列 创建一个数据库 创建表和列 插入数据记录 查询数据记录 修…

C++ Map Set的模拟实现

C Map Set的模拟实现 文章目录 前言一、Map 和 Set是什么&#xff1f;1.Set2.Map 二、困难点困难一、set和map中值的类型不同困难二、Map和Set中值不可修改困难三、红黑树中迭代器的和--1.2.- - 困难四、map中[ ] 运算符重载的实现1.修改红黑树以及Map和Set中insert的返回值1.修…

Three.js投射光线实现三维物体交互

<template><div id"webgl"></div> </template><script setup> import * as THREE from three //导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls // 导入 dat.gui import { GUI } from thre…

k8s v1.30 完整安装过程及CNI安装过程总结

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

【ffmpeg命令入门】添加水印

文章目录 前言什么是水印&#xff1f;为什么要添加水印&#xff1f;ffmpeg添加水印添加图片水印添加文字水印基本使用方法drawtext的参数 总结 前言 在视频制作和编辑的过程中&#xff0c;添加水印是一个常见且重要的步骤。水印不仅可以保护版权&#xff0c;还能用于品牌宣传和…

使用LLaMA-Factory对Llama3-8B-Chinese-Chat进行微调

文章目录 模型及数据&#xff1a;模型下载数据 LLaMA-Factory启动拉取代码启动webui 模型训练数据导入数据预览设置模型路径配置参数及参数的保存开始训练 过程观察加载模型、对话模型导出、再次加载 模型及数据&#xff1a; 模型下载 使用基于中文数据训练过的 LLaMA3 8B 模…

同步状态的广播事件

定向活动广播 你可以直接将事件从一个状态广播到另一个状态&#xff0c;以同步同一图表中的并行&#xff08;AND&#xff09;状态。以下规则适用&#xff1a; 在事件广播期间&#xff0c;接收状态必须处于活动状态。 一个图表中的操作无法将事件广播到另一个图表的状态。 与无定…

大坝安全监测设备有哪些主要功能?

推荐型号&#xff1a;TH-WY1】大坝安全监测设备的主要功能包括以下几个方面&#xff1a; 1. **实时监测大坝的各项物理参数**&#xff1a;包括应变、位移、水位、流量等<sup>1</sup><sup>2</sup>。 2. **数据处理和分析**&#xff1a;对监测数据进行处…

[Javascript】前端面试基础3【每日学习并更新10】

Web开发中会话跟踪的方法有那些 cookiesessionurl重写隐藏inputip地址 JS基本数据类型 String&#xff1a;用于表示文本数据。Number&#xff1a;用于表示数值&#xff0c;包括整数和浮点数。BigInt&#xff1a;用于表示任意精度的整数。Boolean&#xff1a;用于表示逻辑值…

【React1】React概述、基本使用、脚手架、JSX、组件

文章目录 1. React基础1.1 React 概述1.1.1 什么是React1.1.2 React 的特点声明式基于组件学习一次,随处使用1.2 React 的基本使用1.2.1 React的安装1.2.2 React的使用1.2.3 React常用方法说明React.createElement()ReactDOM.render()1.3 React 脚手架的使用1.3.1 React 脚手架…

c生万物系列(封装)

为了对c语言进行封装&#xff0c;笔者参考了lw_oopc等开源库&#xff0c;决定使用宏对结构体进行封装。 先说一下大致思想&#xff1a;通过宏&#xff0c;结构体和文件来实现封装。 大概步骤&#xff1a;抽象出类-> 使用lw_oopc库进行封装->定义接口封装底层实现 ->…

【常见开源库的二次开发】基于openssl的加密与解密——SHA算法源码解析(六)

目录 一、SHA-1算法分析&#xff1a; 1.1 Merkle Tree可信树 1.2 源码实现&#xff1a; 1.3 哈希计算功能 1.4 两种算法的区别&#xff1a; 1.4.1 目的 1.4.2 实现机制 1.4.3 输出 1.4.4 应用场景&#xff1a; 1.4 运行演示&#xff1a; 二、SHA-2算法分析&#xff1a; 2.1哈…

责任链模式的应用与解析

目录 责任链模式责任链模式结构责任链模式适用场景责任链模式优缺点练手题目题目描述输入描述输出描述题解 责任链模式 责任链模式&#xff0c;亦称职责链模式、命令链&#xff0c;是一种行为设计模式&#xff0c;允许你将请求沿着处理者链进行发送。收到请求后&#xff0c;每…

26.8 Django多表操作

1. 表关系 表关系在数据库中指的是表与表之间的连接和依赖关系. 这种关系定义了数据如何在不同的表之间进行交互和关联, 是实现数据一致性和完整性的重要手段.1.1 关系分类 多表关系在数据库中通常分为以下几种类型: * 1. 一对一(One-to-One)关系: 在数据库中, 这种关系通常通…

模拟建造游戏:城市:天际线2(都市天际线2)中文免安装,解压即撸

《城市&#xff1a;天际线2》&#xff08;Cities: Skylines II&#xff09;是一款模拟经营游戏&#xff0c;由Colossal Order开发&#xff0c;Paradox Interactive发行。 下载地址&#xff1a;https://pan.quark.cn/s/84e69332ec3e 更多游戏&#xff1a;https://kdocs.cn/l/cuH…

spring 中的属性解析器 PropertyResolver

我们知道&#xff0c;在 spring 中可以使用占位符&#xff0c;格式如 "${}"&#xff0c;大括号中间放置待替换的占位符&#xff0c;待使用值时根据配置的属性解析器进行解析。但具体是如何操作的&#xff0c;且看本文来进行分析。 PropertyResolver 这是一个针对任…

基于Neo4j将知识图谱用于检索增强生成:Knowledge Graphs for RAG

Knowledge Graphs for RAG 本文是学习https://www.deeplearning.ai/short-courses/knowledge-graphs-rag/这门课的学习笔记。 What you’ll learn in this course Knowledge graphs are used in development to structure complex data relationships, drive intelligent sea…