用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.rhkb.cn/news/383406.html

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

相关文章

Nginx 如何处理请求的流量削峰?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 如何处理请求的流量削峰&#xff1f;一、什么是流量削峰二、Nginx 实现流量削峰的基本原理&#xff08;一&#xff09;反向代理与负载均衡&#xff08;二&…

微服务实战系列之玩转Docker(五)

前言 在我们日常的工作生活中&#xff0c;经常听到的一句话&#xff1a;“是骡子是马拉出来遛遛”。目的是看一个人/物是不是名副其实。我们在使用docker时&#xff0c;也要看看它究竟是如何RUN起来的。当面试官问你的时候&#xff0c;可以如是回答&#xff0c;保你“一文通关…

【python】OpenCV—Open URL Images

文章目录 1、需求描述2、方法一&#xff0c;numpyurlopen3、方法二&#xff0c;scikit-learn4、涉及到的库urllib.request.urlopenskimage.io.imread 5、参考文章 1、需求描述 给出一个 url 链接&#xff0c;显示该链接对应的图片 2、方法一&#xff0c;numpyurlopen # 导入…

Linux应用——socket函数及TCP通信

网络通信实质上也是实现进程间通信&#xff0c;只是与之前进程间通信不同的是&#xff0c;现在在不同的计算机上进行进程间通信。比如&#xff1a;利用QQ工具实现聊天&#xff0c;在两个电脑上有不同的QQ进程之间在通信。而网络通信是如何使用进程间通信呢&#xff1f;采用的是…

力扣高频SQL 50 题(基础版)第一题

文章目录 力扣高频SQL 50 题&#xff08;基础版&#xff09;第一题1757.可回收且低脂的产品题目说明思路分析实现过程准备数据&#xff1a;实现方式&#xff1a;结果截图&#xff1a; 力扣高频SQL 50 题&#xff08;基础版&#xff09;第一题 1757.可回收且低脂的产品 题目说…

pdf2docx - pdf 提取内容转 docx

文章目录 一、关于 pdf2docx主要功能限制 二、安装1、 PyPI2、从remote安装3、从源码安装4、卸载 三、转化 PDF例 1: convert all pages例 2: 转换指定页面例 3: multi-Processing例 4: 转换加密的pdf 四、提取表格五、命令行交互1、按页面范围2、按页码3、Multi-Processing 六…

Java之集合底层-数据结构

Java集合之数据结构 1 概述 数据结构是计算机科学中研究数据组织、存储和操作的一门学科。它涉及了如何组织和存储数据以及如何设计和实现不同的数据操作算法和技术。常见的据结构有线性数据结构&#xff08;含数组、链表、栈和队列等&#xff09;&#xff0c;非线性数据结构…

探索算法系列 - 双指针

目录 移动零&#xff08;原题链接&#xff09; 复写零&#xff08;原题链接&#xff09; 快乐数&#xff08;原题链接&#xff09; 盛最多水的容器&#xff08;原题链接&#xff09; 有效三角形的个数&#xff08;原题链接&#xff09; 查找总价格为目标值的两个商品&…

数据库表结构创建

一、原型图 二、分析 1、天气&#xff0c;值字段只有实测值&#xff0c;可用一个字段表示&#xff08;单位、来源同上&#xff09; 2、气温有默认值与实测值两个选项&#xff0c;一个字段无法表示默认值与实测值&#xff08;单位&#xff0c;来源同上&#xff09; 3、因为有…

SpringMVC 控制层框架-下

五、SpringMVC其他扩展 1. 异常处理机制 1.1 异常处理概念 开发过程中是不可避免地会出现各种异常情况&#xff0c;例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题&#xff0c;甚至直接导致程序崩溃。因此&#xff0c;在开发过程中&a…

LoFTR关键点特征匹配算法环境构建与图像匹配测试Demo

0&#xff0c;LoFTR CVPR 2021论文《LoFTR: Detector-Free Local Feature Matching with Transformers》开源代码 1&#xff0c;项目主页 LoFTR: Detector-Free Local Feature Matching with Transformers 2&#xff0c;GItHub主页 GitHub - zju3dv/LoFTR: Code for "…

Vue 状态管理 Vue CLI

Vue 状态管理 & Vue CLI 1、状态管理2、集中状态管理2.1 Vuex2.1.1 Vuex核心概念2.1.2 Vuex Store实例2.1.3 Vuex Getter2.1.4 Vuex Mutation2.1.4 Vuex Actions2.1.4 Vuex Module 2.2 Pinia2.2.1功能增强 3、Vuex 实现原理4、Pinia 实现原理5、CLI5.1 实现 1、状态管理 将…

vue 搜索框

效果 创建搜索组件&#xff1a; 在Vue项目中&#xff0c;首先需要创建一个搜索组件。这个组件通常包含一个输入框和一个搜索按钮。使用v-model指令将输入框与组件的数据属性&#xff08;如searchKeyword&#xff09;进行双向绑定&#xff0c;以便获取用户输入的关键词。处理搜索…

MongoDB教程(二十一):MongoDB大文件存储GridFS

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、GridFS…

科技云报道:算网筑基AI注智,中国联通如何讲出AI时代的“新故事”?

科技云报道原创。 AI从未停止进化&#xff0c;也从未停止给人类带来惊喜。 从ChatGPT代表的文生文、Dall-E代表的文生图&#xff0c;到Sora代表的文生视频&#xff0c;Suno为代表的文生音乐&#xff0c;生成式AI的“暴力美学”持续突破内容生产的天花板&#xff0c;大模型技术…

【LLM】-07-提示工程-聊天机器人

目录 1、给定身份 1.1、基础代码 1.2、聊天机器人 2、构建上下文 3、订餐机器人 3.1、窗口可视化 3.2、构建机器人 3.3、创建JSON摘要 利用会话形式&#xff0c;与具有个性化特性&#xff08;或专门为特定任务或行为设计&#xff09;的聊天机器人进行深度对话。 在 Ch…

vue import from

vue import from 导入文件&#xff0c;从XXXX路径&#xff1b;引入文件 import xxxx from “./minins/resize” import xxxx from “./minins/resize.js” vue.config.js 定义 : resolve(src)&#xff1b;就是指src 目录 import xxxx from “/utils/auth” im…

新版GPT-4omini上线!快!真TM快!

大半夜&#xff0c;OpenAI突然推出了GPT-4o mini版本。 当我看到这条消息时&#xff0c;正准备去睡觉。mini版本质上是GPT-4o模型的精简版本&#xff0c;没有什么革命性的创新&#xff0c;因此我并没有太在意。 结果今天早上一觉醒来发现伴随GPT-4o mini上线&#xff0c;官网和…

RAS--APEI 报错解析流程(2)

RAS--APEI 报错解析流程(1) 除了APEI 中除了GHES会记录错误&#xff0c;在Post过程中的错误通常是通过BERT Table汇报 1.BERT Boot Error Record Table is used to report unhandled errors that occurred in a previous boot&#xff0c;it is reported as a ‘one-time polle…

stats 监控 macOS 系统

Stats 监控 macOS 系统 CPU 利用率GPU 利用率内存使用情况磁盘利用率网络使用情况电池电量 brew install stats参考 stats github