项目简介

本文介绍如何使用nest，vue3，socket.io搭建一个前后端分离的web聊天demo

创建项目

没有nest-cli的需要先安装脚手架

npm install -g @nestjs/cli

安装完成后使用脚手架建立服务端项目

nest new nest-server

然后一路回车，初始化完成后的目录结构如下：

目录结构

安装配置 socket.io

yarn add @nestjs/websockets @nestjs/platform-socket.io

使用脚手架来初始化socket

 nest g gateway events

完成后会在src目录下生成两个文件events.getaway.ts和events.getaway.spec.ts

服务配置

配置socket服务，在events.getaway.ts中，由于项目是前后端分离，所以需要设置cors允许跨域

import { SubscribeMessage, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
@WebSocketGateway(9892, { cors: true })
export class EventsGateway {
  @WebSocketServer() server: Server;
  @SubscribeMessage('message')
  handleMessage(client: Socket, data: string) {
    //向除自己以外的人广播
    client.broadcast.emit('message', data);
  }
}

启动项目

现在让我们启动项目测试一socket服务，运行yarn dev等待项目启动完成后，使用postman来新建一个socket链接

截图_20220907105249.png

截图_选择区域_20220907105756.png

填写完成后点击连接，等待连接成功后点击发送，效果如下

我们成功的接收到了来自服务端返回的消息

添加消息接收推送功能

服务端的socket服务已经搭建完成，现在使用vue3搭建一个简单的聊天页面

<template>
  <div class="chat-div">
    <span 
    v-for="(item,idx) in messageList" 
    :class="{'chat-send':item.type,'chat-receive':!item.type}"
    >
    {{ item.data }}
    </span>
  </div>
  <div class="chat-input">
    <textarea v-model="inputMessage"></textarea>
    <button @click="send">send</button>
  </div>
</template>

<script setup lang="ts">
import io from 'socket.io-client'
import {reactive, ref} from "vue";
import {message} from "../chat";

const client = io('http://127.0.0.1:9892').connect();

const messageList = reactive([] as message[]);
client.on('message', (res: string) => {
  messageList.push({type: 0, data: res});
});

const inputMessage = ref('');
const send = () => {
  messageList.push({type: 1, data: inputMessage.value});
  client.emit('message', inputMessage.value);
}
</script>

<style scoped lang="scss">
.chat-div {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  border: solid 1px;
  overflow: auto;
}

.chat-input {
  width: 500px;
  display: flex;

  textarea {
    flex-grow: 1;
  }
}

.chat-send {
  text-align: right;
}

.chat-receive {
  text-align: left;
}
</style>

运行效果

运行搭建完的前后端服务，在浏览器中打开两个页面，就可以开始自己和自己聊天了

结尾

这样就完成了一个简单的聊天程序，下一篇文章会将视频聊天添加到当前的项目中，未完待续...

vue3 nest socket.io 快速搭建聊天室demo