用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,一经查实,立即删除!

相关文章

6 Go语言的常量、枚举、作用域

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;由浅入深讲解Go语言&#xff0c;希望大家都能够从中有所收获&#xff0c;也请大家多多支持。 查看相关资料与知识库 专栏地址:Go专栏 如果文章知识点有错误的地方&#xff0c;请指正&#xff01;大家一起学习&#xff0c;…

【Python】主字符串中查找子字符串:滑动窗口、正则表达式、递归检查

一、题目 In this challenge, the user enters a stirng and a substring. You have to print the number of times that the substring occurs in the given string. String traversal will tack place from left to right, not from right to lef. NOTE: String letters ar…

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、避免在人群密集或有障碍物的…

深入理解 Java17 新特性:Sealed Classes

0 关键总结 Java SE 15在2020年9月发布&#xff0c;预览功能引入“封闭类”(JEP 360)封闭类是一种限制哪些其他类或接口可扩展它的类或接口类似枚举&#xff0c;封闭类在领域模型中捕获替代方案&#xff0c;允许程序员和编译器推理其穷尽性封闭类对于创建安全的层次结构也很有…

iOS 创建一个私有的 CocoaPods 库

创建一个私有的 CocoaPods 库&#xff08;pod&#xff09;涉及几个步骤&#xff0c;包括设置私有的 Git 仓库、创建 Podspec 文件、发布到私有仓库等等。以下是详细步骤&#xff1a; 设置私有 Git 仓库 首先&#xff0c;在 GitHub、GitLab 或 Bitbucket 上创建一个新的私有仓库…

身份证如何查验真伪?C#身份证二要素、三要素接口集成

身份证不仅是我们的身份证明&#xff0c;更是社会生活中的“通行证”&#xff0c;现在人们的衣食住行都离不开身份证。但对于提供服务的平台而言&#xff0c;如何对用户提供的身份信息进行真伪核验便成为了一大难题。别担心&#xff0c;今天小编为服务平台带来了身份证二要素、…

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

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

Android 列表视频滑动自动播放—滑动过程自动播放(滑动播放页面卡顿优化)

上一篇文章我们RecyclerView列表滑动自动播放——Android 列表视频滑动自动播放—滑动过程自动播放(实现思路) 实际我们会发现滑动页面自动播放视频页面会卡顿&#xff0c;针对这个问题&#xff0c;我们可以优化一下代码&#xff0c;通过Handler.runnable()去实现计算播放视频…

力扣 232用栈实现队列

思路&#xff1a; 栈的特性是先进后出&#xff0c;队列是先进先出 因此用两个栈来模拟队列 要实现的功能包括 push 入队列 pop() 出队列 peek获取队列的最上元素 isempty 队列判空 push 正常操作 stin.push()&#xff0c;只要元素入栈就行&#xff0c;stout元素…

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;对监测数据进行处…

CSS全部标签属性重置语法

简单介绍 每个浏览器默认的属性不同&#xff0c;像谷歌浏览器不设置的话&#xff0c;默认每个元素是有外边距margin的&#xff0c;有的浏览器列表还会带上序号&#xff0c;有的浏览器就没有。 所以为了让所有浏览器都一致&#xff0c;在写CSS开始前&#xff0c;我们都需要用C…

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

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