用uniapp 及socket.io做一个简单聊天app 2

news2024/9/20 18:54:07

在这里只有群聊,二个好友聊天,可以认为是建了一个二人的群聊。

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.coloradmin.cn/o/1947510.html

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

相关文章

学术研讨 | 区块链治理与应用创新研讨会顺利召开

学术研讨 近日&#xff0c;国家区块链技术创新中心组织&#xff0c;长安链开源社区支持的“区块链治理与应用创新研讨会”顺利召开&#xff0c;会议围绕区块链治理全球发展现状、研究基础、发展趋势以及区块链行业应用创新展开研讨。北京大学陈钟教授做了“区块链治理与应用创…

我们的人生,向阳而生,去更远的地方,见更亮的光

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140683410 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

qt SQLite学习记录

1. 查看qt中数据库的驱动的类型的支持 QStringList drivers QSqlDatabase::drivers();//获取qt中所支持的数据库驱动类型foreach(QString driver,drivers){qDebug()<<driver;}2. Qt SQL 模块包含的主要类的功能介绍 Qt SQL 模块包含了一些主要的类&#xff0c;用于在 …

自动驾驶系统开发与调试:车路云一体化无人驾驶挑战赛参赛体验

点击蓝字 关注我们 在过去的几年里&#xff0c;自动驾驶技术在全球范围内吸引了大量关注。其潜力不仅在于提升行车安全&#xff0c;而且还可以改变我们的出行方式和城市规划&#xff0c;提高交通运输效率。国际汽车工程师学会&#xff08;SAE&#xff09;根据不同自动驾驶程度&…

Linux中,MySQL数据库管理

使用MySQL数据库 查看数据库结构 MySQL是一套数据库管理系统&#xff0c;在每台MySQL服务器中&#xff0c;均支持运行多个数据库&#xff0c;每个数据库相当于一个容器&#xff0c;其中存放着许多表&#xff0c;如图2.1所示。 下面分别介绍查看数据库、表结构的相关操作语句。…

单片机原理及技术(四)—— C51语言程序设计基础(C51编程)

目录 一、C51语言中的数据类型与存储类型 1.1 数据类型 1.2 C51语言的扩展数据类型 1.3 数据存储类型 1.4 数据存储模式 二、C51语言的特殊寄存器及变量定义 2.1 特殊功能寄存器的C51语言定义 2.1.1 使用关键字定义sfr 2.1.2 使用头文件访问SFR 2.1.3 特殊功能寄存器…

《梦醒蝶飞:释放Excel函数与公式的力量》18.1 图表类型与设计

第18章&#xff1a;创建图表和数据可视化 18.1 图表类型与设计 Excel提供了多种图表类型&#xff0c;帮助用户以直观的方式展示数据。选择合适的图表类型和设计可以显著提高数据的可读性和理解度。以下将介绍常见的图表类型及其应用&#xff0c;并通过具体案例进行说明。 18.…

无人机制造工艺流程详解

一、需求分析 无人机制造的第一步是需求分析。这一阶段主要明确无人机的使用场景、功能要求、性能指标以及成本预算等。通过与客户或项目团队的深入沟通&#xff0c;确保对无人机的需求有全面而准确的理解。同时&#xff0c;也需要进行市场调研&#xff0c;了解同类型产品的特…

达梦数据库系列—31. 事务和锁

目录 事务 事务的状态 事务的四种隔离级别ACID 锁 锁粒度 锁等待与死锁 锁查看 锁处理 事务 数据库事务是指作为单个逻辑工作单元的一系列操作的集合。 事务的状态 NOT_START 未启动 ACTIVE 活动 LOCK_WAIT 锁等待 TRX4_PRE_COMMIT 预提交 事务ID(事务号)&…

llamaindex+Internlm2 RAG实践

llamaindexInternlm2 RAG实践 环境、模型准备 进入开发机后&#xff0c;从官方环境复制运行 InternLM 的基础环境&#xff0c;命名为 llamaindex&#xff0c;在命令行模式下运行&#xff1a; conda create -n llamaindex python3.10运行 conda 命令&#xff0c;激活 llamain…

IP地址专用SSL证书申请指南——六步完成

IP地址SSL证书是一种专门设计用于IP地址的SSL/TLS证书&#xff0c;部署IP地址SSL证书可以实现IP地址HTTPS加密。 一&#xff1a;前提条件 1&#xff1b;申请IP地址SSL证书,必须拥有这个IP地址的管理权限 2&#xff1b;非内网IP&#xff0c;以下是常见的内网IP字段 10.0.0.0…

Mindspore框架循环神经网络RNN模型实现情感分类|(三)RNN模型构建

Mindspore框架循环神经网络RNN模型实现情感分类 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;一&#xff09;IMDB影评数据集准备 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;二&#xff09;预训练词向量 Mindspore框架循环神经网络RNN模型实现…

松下UV电源MID SONIC600 ANUP8304NAIS电源设备更新换下的

松下UV电源MID SONIC600 ANUP8304NAIS电源设备更新换下的

JL 跳转指令的理解

一般情况下&#xff0c;JU 和 JC 是最常见的跳转指令&#xff1b;但有时会用到JL 指令&#xff0c;JL 说起来更像是一组指令&#xff0c;类似C,C# 语言中的 switch case 语句&#xff0c;但是有个明显的不同&#xff0c;前者的判断条件可以是任意合理数字&#xff0c;后者范围…

洗地机什么品牌质量好耐用?口碑最好的洗地机排名分享

在追求高效、便捷的现代家居环境中&#xff0c;洗地机作为清洁工具的关键角色&#xff0c;其品牌与品质的选择成为了消费者关注的焦点。面对琳琅满目的洗地机市场&#xff0c;洗地机什么品牌质量好耐用&#xff1f;如何挑选出一款既高效又智能&#xff0c;且能带来卓越清洁体验…

算力共享:环形结构的算力分配策略

目录 算力共享:环形结构的算力分配策略 方法签名 方法实现 注意事项 nodes.sort(key=lambda x: (x[1].memory, x[0]), reverse=True) end = round(start + (node[1].memory / total_memory), 5) 算力共享:环形结构的算力分配策略 这段代码定义了一个名为RingMemoryWeig…

基于 HTML+ECharts 实现智慧运维数据可视化大屏(含源码)

智慧运维数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 在现代企业中&#xff0c;运维管理是确保系统稳定运行的关键环节。随着数据量的激增&#xff0c;如何高效地监控和分析运维数据成为了一个重要课题。本文将介绍如何利用 HTML 和 ECharts 实现一个智慧运维数据可…

菜鸟从0学微服务——MyBatis-Plus

关于“菜鸟从0学微服务” 针对有编程基础&#xff0c;开始学习微服务的同学&#xff0c;我们陆续推出从0学微服务的笔记分享。力求从各个中间件的使用来反思这些中间件的作用和优势。 会分享的比较快&#xff0c;会记录demo演算和中间件的使用过程&#xff0c;至于细节的理论…

Python的人脸识别程序

1.录入人脸&#xff0c;输入ID号 haarcascade_frontalface_default.xml # 导入模块 import os import numpy as np import cv2 as cv import cv2face_detector cv2.CascadeClassifier(rD:\Automation_All_Files\OCR\haarcascade_frontalface_default.xml) # 待更改# 为即将…

【VTKExamples::Movie】制作并保存动画

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK中创建动画,并保存动画的方法,样例及样例源码,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ…