本项目是一个小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.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>
<span>{{ item.msg }}</span>
<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/
