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

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

php 复制代码
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的界面

php 复制代码
<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>

运行效果:

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek