Nestjs与Vue实现多人聊天[简易版]

本项目是一个小demo,帮助各位理清一点开发思路,作为一个小参考,虽然技术栈是nodejs。但是其他语言也是相通的。

准备环境:

  • Nodejs version >=18.13.0
  • Vue3
  • Nestjs
  • soket.io

一、初始化

打开一个路径启动cmd窗口,初始化前后端项目,并安装依赖。

# 后端
nest new app
# 安装完依赖后再安装这个@nestjs/websockets包
# 前端
pnpm create vite 
# 选择vue模板,然后安装依赖,最后安装socket.io-client 和 socket.io

  

二、写逻辑

1.后端逻辑

先写后端,nestjs相关的。

  1. 首先进入demo的src目录
  2. 在src目录创建getway目录
  3. 在getway中创建两个文件,分别是gatet.module.ts和enent.gateway.ts
# gatet.module.ts
import { Module } from '@nestjs/common';
import { EventGateway } from './enent.gateway';

@Module({
    providers: [EventGateway]
})

export class GatewayModule { }
# enent.gateway.ts
// 网关文件
import { WebSocketGateway, SubscribeMessage, MessageBody, ConnectedSocket, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'http';

@WebSocketGateway({ cors: { origin: '*' } })
export class EventGateway {
    // 服务端
    @WebSocketServer()
    serve: Server;

    // 订阅消息
    @SubscribeMessage('sayMessage')
    handleMessage(@MessageBody() body: any, @ConnectedSocket() client: any) {
        // 监听一个自定义事件来发布消息
        // client.emit('onMessage')
        const { origin } = client.handshake.headers
        this.serve.emit('onMessage', {
            time: new Date().toLocaleString(),
            msg: body,
            ip: origin
        })
    }
}

最后一步就是app.modules.ts中imports导入 GatewayModule 

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GatewayModule } from './getway/gatet.module';

@Module({
  imports: [GatewayModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

2.前端逻辑

 

<template>
  <div>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <span style="color:red;font-size: 0.9vw;">IP:{{ showIp(item.ip) }}</span>&nbsp;&nbsp;
          <span>{{ item.msg }}</span>&nbsp;&nbsp;
          <span style="color:#888;font-size: 0.9vw;">{{ item.time }}</span>
        </li>
      </ul>
     <input type="text" v-model="value">
     <button @click="handleSendMsg">发送消息</button>
  </div>
</template>

<script setup>
import { io } from "socket.io-client";
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'

/**
 * @name 服务器地址
 */
const socket = io(`http://localhost:3000`)

/**
 * @name 消息列表
 */
const list = ref([])

/**
 * @name 输入的信息
 */
const value = ref('')

/**
 * @name 连接状态
 */
const inside = ref(false)

// 发送消息
const handleSendMsg = () => {
  if (value.value != '') {
    socket.emit('sayMessage', value.value, e => { })
    value.value = ''
  } else {
    alert('你输入的信息不能为空')
  }
}

// 连接成功
socket.on('connect', () => {
  inside.value = true
})
// 断开连接
socket.on('disconnect', () => {
  inside.value = false
})

socket.on('foo', (...args) => {
  console.log("foo", args);
})

socket.on('bar', (...args) => {
  console.log("bar", args);
})

onMounted(() => {
  // 监听接收消息
  socket.on('onMessage', e => {
    list.value.push(e)
  })
})

onUnmounted(() => {
  // 断开连接
  socket.disconnect()
})

</ script>

都比较简单,想了解具体用发,可以去官网:https://socket.io/zh-CN/ 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧城市的前景:数字孪生技术在智慧城市中的应用前景

目录 一、引言 二、数字孪生技术及其在智慧城市中的应用概述 三、数字孪生技术在智慧城市中的应用前景 1、城市规划与仿真模拟 2、智能交通与出行服务 3、智慧环保与可持续发展 4、智慧公共服务与社会治理 5、智慧能源与绿色建筑 四、数字孪生技术在智慧城市中的挑战与…

CSS 入门指南(二)CSS 常用样式及注册页面案例

CSS 常用样式 颜色属性 常见样式的颜色属性&#xff1a; color&#xff1a;定义文本的颜色border-color&#xff1a;定义边框的颜色background-color&#xff1a;设置背景色 颜色属性值设置方式&#xff1a; 十六进制值 - 如&#xff1a;&#xff03;FF0000一个RGB值 - 如…

冬去春来天气阴晴不定 美食拿捏味蕾安稳换季

俗话说“春打六九头”&#xff0c;3月虽然已经入春&#xff0c;但是天气依然是凉飕飕的 &#xff0c;冬天春天的换季期&#xff0c;因为天气的变化&#xff0c;尤为痛苦。但是来到了换季期&#xff0c;天气也不总是那么稳定&#xff0c;随着气温的起伏&#xff0c;我们的食欲也…

Orange3数据预处理(预处理器组件)

1.组件介绍 Orange3 提供了一系列的数据预处理工具&#xff0c;这些工具可以帮助用户在数据分析之前准备好数据。以下是您请求的预处理组件的详细解释&#xff1a; Discretize Continuous Variables&#xff08;离散化连续变量&#xff09;&#xff1a; 这个组件将连续变量转…

Python调用edge-tts实现在线文字转语音

edge-tts是一个 Python 模块&#xff0c;允许通过Python代码或命令的方式使用 Microsoft Edge 的在线文本转语音服务。 项目源码 GitHub - rany2/edge-tts: Use Microsoft Edges online text-to-speech service from Python WITHOUT needing Microsoft Edge or Windows or an…

力扣hot---岛屿数量

dfs思路&#xff1a; 首先通过两层for循环遍历每一个点&#xff0c;如果这个点为0或者2&#xff08;这个2是什么呢&#xff1f;是在遍历该点以及该点连成的这一片区域中&#xff0c;因为通过深度优先搜索&#xff0c;遍历该点就等于遍历这一片区域&#xff0c;遍历这篇区域中的…

打字通小游戏制作教程:用HTML5和JavaScript提升打字速度

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

strlen和sizeof的应用与区别

sizeof和strlen作为都能求大小的工具两者之间有何不同, strlen: 1. strlrn计算的是什么的大小 strlen计算的是字符串长度的大小&#xff0c;所以strlen在计算字符串长度时会一直顺着字符串的元素一个一个的查找&#xff0c;一直到查询到了/0才会停止 2.strlen属于库函数&am…

C# 用 System.Xml 读 Freeplane.mm文件,生成测试用例.csv文件

Freeplane 是一款基于 Java 的开源软件&#xff0c;继承 Freemind 的思维导图工具软件&#xff0c;它扩展了知识管理功能&#xff0c;在 Freemind 上增加了一些额外的功能&#xff0c;比如数学公式、节点属性面板等。 先写一个测试程序 test_read_Xml.cs 如下 using System;…

基于springboot+vue实现开放实验室管理系统项目【项目源码+论文说明】

基于springbootvue实现企业任务管理追踪系统演示 摘要 信息技术永远是改变生活的第一种创新方式&#xff0c;各种行业的发展更是脱离不了科技化的支持。原本传统的行业正在被科技行业的切入悄悄的发生变化。就拿我们生活当中常见的事情举例而言&#xff0c;在外卖行业还没有发…

Linux/Windows下部署OpenCV环境(Java/SpringBoot/IDEA)

环境 本文基于Linux&#xff08;CentOS 7&#xff09;、SpringBoot部署运行OpenCV 4.5.5&#xff0c;并顺带记录Windows/IDEA下如何调试SpringBoot调用OpenCV项目。 Windows下调试 首先我们编写代码&#xff0c;并在Windows/IDEA下调试通过。 下载Windows版安装包&#xff0…

macbook pro 2018 安装 arch linux 双系统

文章目录 友情提醒关于我的 mac在 mac 上需要提前做的事情复制 wifi 驱动 在 linux 上的操作还原 wifi 驱动连接 wifi 网络磁盘分区制作文件系统挂载分区 使用 archinstall 来安装 arch linux遗留问题 友情提醒 安装 archl linux 的时候&#xff0c;mac 的键盘是没法用的&#…

堆宝塔(Python)

作者 陈越 单位 浙江大学 堆宝塔游戏是让小朋友根据抓到的彩虹圈的直径大小&#xff0c;按照从大到小的顺序堆起宝塔。但彩虹圈不一定是按照直径的大小顺序抓到的。聪明宝宝采取的策略如下&#xff1a; 首先准备两根柱子&#xff0c;一根 A 柱串宝塔&#xff0c;一根 B 柱用于…

在高并发、高性能、高可用 三高项目中如何设计适合实际业务场景的分布式id(一)

分布式ID组件&#xff1a;黄金链路上的关键基石 在现代分布式系统中&#xff0c;分布式ID组件无疑扮演着至关重要的角色。作为整个系统的黄金链路上的关键组件&#xff0c;它的稳定性和可靠性直接关乎到整个系统的正常运作。一旦分布式ID组件出现问题&#xff0c;黄金链路上的…

【armv8 / armv9】: MMU深度学习

文章目录 一、MMU概念介绍二、虚拟地址空间和物理地址空间2.1、(虚拟/物理)地址空间的范围2.2、物理地址空间有效位(范围) 三、Translation regimes四、地址翻译/几级页表&#xff1f;4.1、思考&#xff1a;页表到底有几级&#xff1f;4.2、以4KB granule为例&#xff0c;页表的…

FreeRTOS教程1 基础知识

目录 1、准备材料 2、学习目标 3、前提知识 3.1、FreeRTOS简介 3.2、源码函数命名规律 4、动手创建一个FreeRTOS空工程 4.1、CubeMX相关配置 4.1.1、工程基本配置 4.1.2、时钟树配置 4.1.3、外设参数配置 4.1.4、外设中断配置 4.2、生成代码 4.2.1、配置Project Ma…

AIGC实战——GPT(Generative Pre-trained Transformer)

AIGC实战——GPT 0. 前言1. GPT 简介2. 葡萄酒评论数据集3. 注意力机制3.1 查询、键和值3.2 多头注意力3.3 因果掩码 4. Transformer4.1 Transformer 块4.2 位置编码 5. 训练GPT6. GPT 分析6.1 生成文本6.2 注意力分数 小结系列链接 0. 前言 注意力机制能够用于构建先进的文本…

ubuntu安装使用eigen(vscode)

1、eigen安装 安装命令如下&#xff1a; sudo apt-get update sudo apt-get install libeigen3-dev 默认安装路径为&#xff1a; /usr/include/eigen3 安装版本查询命令&#xff1a; pkg-config --modversion eigen3 2、CMakeLists.txt cmake_minimum_required(VERSION 3.…

21、电源管理入门之芯片设计中的电源管理

目录 1. 关于PCSA和SCP 2. 关于PSCI和SCMI 3. 关于芯片SoC设计中的一些要点 参考: 这里以ARM为例来进行说明,我们在做驱动软件的时候,就需要跟硬件SoC里面的IP打交道,通过操作寄存器来实现硬件功能。之前的文章:ARM SCP入门-AP与SCP通信中3和4章节已经进行了简单介绍,…

[MYSQL数据库]--表的增删查改和字段类型

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、表的增…