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

本文主要是介绍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相关的。

首先进入demo的src目录
在src目录创建getway目录
在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.headersthis.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/

这篇关于Nestjs与Vue实现多人聊天[简易版]的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！