socket.io实现简易聊天室功能

我心飞翔发布于 1年前分类：vue

本文简单介绍使用websocket实现一个简单的聊天室功能，我这里是用vite初始化的vue3项目。

在线体验地址：http://chat.lb0125.com/chat

需要安装的库：

socket.io、socket.io-client等

1、代码

整体代码目录结构如下，分为客户端和服务端代码：

1.1、服务端代码chat_server

a、首先使用 npm init 初始化一个node工程

b、然后npm install socket.io

c、新建一个app.js文件，代码如下：

const { createServer } = require("http");
const { Server } = require("socket.io");

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {                 //解决跨域问题
    origin: "*",
    methods: ["GET", "POST"]
  }
});

io.on("connection", (socket, data) => {
  // 接受消息
  socket.on('sendMsg', (data) => {
    // io表示广播出去，发送给全部的连接
    io.emit('sendMsged', data)
  });

  // 接受登录事件
  socket.on('login', data => {
    io.emit('logined', data)
  })

  // 接受登出事件
  socket.on('logout', data => {
    io.emit('logouted', data)
  })

  // 监听客户端与服务端断开连接
  socket.on('disconnecting', () => {
    console.log('客户端断开了连接')
  })
});

httpServer.listen(3011, function () {
  console.log('http://localhost:3011')
});

1.2、客户端代码 chat_client

由于我这里还使用安装了vue-router4、element-plus、less-loader moment等库，当然您可以根据自己需要决定是否安装

第一步：初始化vue3+vite项目

　　npm create vite@latest 后根据提示输入项目名称，选择vue版本进行后续操作

第二步：npm install socket.io-client以及其他需要使用到的库

第三步：添加环境配置文件，修改vite.config.js配置以及编写代码

a、vite.config.js：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//引入gzip静态资源压缩
import viteCompression from 'vite-plugin-compression'
const path = require('path');
const { resolve } = require('path');

export default ({ mode,command }) => {
  console.log('当前环境=========' + mode)
  const plugins = [
    vue(),
  ];
  // 如果是非开发环境，配置按需导入element-plus组件
  if (mode !== 'development') {
    plugins.push(
      AutoImport({
        resolvers: [ElementPlusResolver()],
      })
    );
    plugins.push(
      Components({
        resolvers: [ElementPlusResolver()],
      })
    );
  }

  return defineConfig({
    base: './',
    plugins,
    hmr: { overlay: false },

    // 配置前端服务地址和端口(可注释掉，默认是localhost:3000)
    server: {
      host: '0.0.0.0',
      port: 9000,
      // 是否开启 https
      https: false,
      // 本地跨域代理
      proxy: {
        '/***': {
          target:'http://****',
          changeOrigin: true,
        },
      }
    },

    // 起个别名，在引用资源时，可以用‘@/资源路径’直接访问
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
    },

    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
          },
          javascriptEnabled: true,
        },
      },
    },

    // 打包配置
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true, // 清除console
          drop_debugger: true, // 清除debugger
        },
      },
      chunkSizeWarningLimit: 1500, // 大文件报警阈值设置
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          // 超大静态资源拆分
          manualChunks(id) {
            if (id.includes('node_modules')) {
              let str = id.toString().split('node_modules/')[1].split('/')[0].toString();
              return str.substring(str.lastIndexOf('@') + 1);
            }
          }
        }
      }
    }
  })
}

b、表情图片放置在chat_client/public/imgs/face目录下:

c、在src/common目录下新建constant.js文件：

/**
 * 常量
 */

// 是否是开发环境
export const isDev = import.meta.env.VITE_APP_ENV == "development" ? true : false;

// 当前所属环境
export const env = import.meta.env.VITE_APP_ENV;

// api地址
export const baseUrl = import.meta.env.VITE_APP_BASEURL;
export const wsUrl = import.meta.env.VITE_WS_URL;

// 表情
export const faceImgs = [
  { img: 'weixiao.png', name: '[微笑]' },
  { img: 'yukuai.png', name: '[愉快]' },
  { img: 'aoman.png', name: '[傲慢]' },
  { img: 'baiyan.png', name: '[白眼]' },
  { img: 'ciya.png', name: '[呲牙]' },
  { img: 'daku.png', name: '[大哭]' },
  { img: 'deyi.png', name: '[得意]' },
  { img: 'fadai.png', name: '[发呆]' },
  { img: 'fanu.png', name: '[发怒]' },
  { img: 'ganga.png', name: '[尴尬]' },
  { img: 'haixiu.png', name: '[害羞]' },
  { img: 'jie.png', name: '[饥饿]' },
  { img: 'jingkong.png', name: '[惊恐]' },
  { img: 'jingya.png', name: '[惊讶]' },
  { img: 'lenghan.png', name: '[冷汗]' },
  { img: 'liulei.png', name: '[流泪]' },
  { img: 'nanguo.png', name: '[难过]' },
  { img: 'piezui.png', name: '[撇嘴]' },
  { img: 'se.png', name: '[色]' },
  { img: 'shui.png', name: '[睡]' },
  { img: 'tiaopi.png', name: '[调皮]' },
  { img: 'touxiao.png', name: '[偷笑]' },
  { img: 'zhuakuang.png', name: '[抓狂]' },
]

e、在src/views目录下新建chat文件夹，并在chat文件夹下新建Chat.vue文件

<template>
<div class="container">
<div class="header"
:style="{ 'border-bottom': isMobile ? '1px solid #eee' : '0 none', padding: isMobile ? '0 12px' : '0px' }">
<el-button type="primary" @click="onConnect" v-if="userName == ''">进入会话</el-button>
<span v-else style="flex:1;">您的姓名：{{ userName }}</span>
<el-button @click="onDisConnect" v-show="userName !== ''">退出会话</el-button>
</div>
<div class="content" id="content" @click="() => { isShowFace = false }"
:style="{ border: isMobile ? 'none' : '1px solid #eee' }">
<ul>
<li v-for="(item, i) in msgList" :key="i">
<p v-if="item.type == 0" class="item content-login">{{ item.date }} {{
item.userId == userId ? '您' :
item.userName
}}{{ item.msg }}</p>
<p v-if="item.type == -1" class="item content-logout">{{ item.date }} {{
item.userId == userId ? '您' :
item.userName
}}{{ item.msg }}</p>
<div v-if="item.type == 1" class="item" :class="{ 'text-right': userId == item.userId }">
<!-- 自己发送的消息 -->
<div v-if="item.userId == userId" class="clearfix">
<div class="content-name" style="text-align:right;">
<span style="margin-right:10px;">{{ item.date }}</span>
<span>{{ item.userName }}</span>
</div>
<div class="content-msg right" style="text-align: right;">
<p style="display:inline-block;text-align:left;border-top-right-radius: 0px;background: #73e273;"
v-html="item.msg"></p>
</div>
</div>
<!-- 别人发送的消息 -->
<div v-else>
<div class="content-name">
<span>{{ item.userName }}</span>
<span style="margin-left:10px;">{{ item.date }}</span>
</div>
<div class="content-msg" style="text-align: left;">
<p style="display:inline-block;text-align:left;border-top-left-radius: 0px;" v-html="item.msg"></p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="footer" :style="{ padding: isMobile ? '10px 12px' : '10px 0px' }">
<el-input class="content-input" type="textarea" :autosize="{ minRows: 1, maxRows: 5 }" resize="none" v-model="msg"
ref="inputRef" placeholder="请输入发送内容" @focus="onInputFocus" @keyup.enter="onSend" />
<div class="face-icon">
<img src="@/assets/img/face.png" alt="表情" @click="onToggleFace">
</div>
<div class="send-dv">
<el-button type="primary" class="send-btn" @click="onSend" :disabled="userName == ''">发 送</el-button>
</div>
</div>
<div class="face-dv" v-show="isShowFace" :class="{ 'face-dv-pc': !isMobile }">
<div class="arrow" v-show="!isMobile"></div>
<div class="face">
<div class="face-item" v-for="item in faceImgs" :key="item.img" @click="onInputFace(item.img, item.name)">
<img :src="`./imgs/face/${item.img}`" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'chat'
}
</script>
<script setup>
import { onMounted, ref, reactive, nextTick } from "vue"
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import { io } from 'socket.io-client';
import { wsUrl, faceImgs } from '@/common/constant';
import { isPC, guid } from '@/utils/utils';
const isMobile = ref(!isPC());
const isShowFace = ref(false);
const inputRef = ref(null);
const msg = ref('')
const userId = ref(''); // 用户id
const userName = ref('');  // 用户姓名
let socket = null;
const abc = ref('<span>asdf</span>')
const msgList = reactive(
[
// { id: 0, type: 1, userName: '张安', date: '2012-12-12 12:12:12', msg: '哈哈哈1' },
// { id: 1, type: 0, userName: '张安1', date: '2012-12-12 12:12:12', msg: '张安进入会话' },
// { id: 2, type: 1, userName: '张安2', date: '2012-12-12 12:12:12', msg: '哈哈哈3' },
]
)
// 表情框显示隐藏切换
const onToggleFace = () => {
if (userName.value == '') {
ElMessage.warning('请先点击进入会话');
return;
}
if (isShowFace.value) {
isShowFace.value = false;
} else {
isShowFace.value = true;
}
}
// 输入框获取焦点事件
const onInputFocus = (e) => {
isShowFace.value = false;
if (userName.value == '') {
ElMessage.warning('请先点击进入会话');
}
}
// 点击表情
const onInputFace = (img, name) => {
console.log(img, name)
msg.value += name;
isShowFace.value = false;
}
// 点击发送消息
const onSend = () => {
if (msg.value.trim() == '') {
ElMessage.warning('不可以发送空白消息')
return
}
let str = msg.value;
faceImgs.forEach(item => {
if (str.indexOf(item.name) > -1) {
str = str.replaceAll(item.name, `<img src="./imgs/face/${item.img}" style="width:20px;vertical-align:top;" />`);
}
})
socket.emit('sendMsg', {
type: 1,
userId: userId.value,
userName: userName.value,
date: moment(new Date()).format('HH:mm:ss'),
msg: str
})
msg.value = '';
isShowFace.value = false;
}
const onConnect = () => {
console.log('onConnect')
ElMessageBox.prompt('请输入您的姓名', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消',
inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
inputErrorMessage: '你的姓名',
}).then(({ value }) => {
userId.value = guid();
userName.value = value;
socket = io.connect(wsUrl);
setTimeout(() => {
socket.emit('login', {
id: Math.random() * 100000000,
type: 0,
date: moment(new Date()).format('HH:mm:ss'),
userId: userId.value,
userName: userName.value
})
}, 200)
socket.on('connect', () => {
console.log('客户端建立连接'); // true
});
// 监听登录事件
socket.on('logined', data => {
msgList.push({
id: Math.random() * 100000000,
type: data.type,
userId: data.userId,
userName: data.userName,
date: data.date,
msg: ' 进入会话'
})
})
// 监听登录出事件
socket.on('logouted', data => {
msgList.push({
id: Math.random() * 100000000,
type: data.type,
userId: data.userId,
userName: data.userName,
date: data.date,
msg: '离开会话'
})
})
// 监听发送消息事件
socket.on('sendMsged', data => {
msgList.push({
id: Math.random() * 100000000,
type: data.type,
userId: data.userId,
userName: data.userName,
date: data.date,
msg: data.msg
})
nextTick(() => {
let contentNode = document.getElementById('content')
contentNode.scrollTop = contentNode.scrollHeight
})
})
}).catch(() => {
})
}
const onDisConnect = () => {
console.log('onDisConnect')
socket.emit('logout', {
id: Math.random() * 100000000,
type: -1,
date: moment(new Date()).format('HH:mm:ss'),
userId: userId.value,
userName: userName.value
})
setTimeout(() => {
socket.disconnect()
userId.value = '';
userName.value = '';
}, 200)
}
</script>
<style lang="less" scoped>
.container {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
max-width: 522px;
margin: 0px auto;
.header {
height: 50px;
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
}
.content {
flex: 1;
padding: 12px;
overflow-y: auto;
.item {
margin-bottom: 20px;
&.content-login {
font-size: 12px;
color: #666;
text-align: center;
}
&.content-logout {
font-size: 12px;
color: #666;
text-align: center;
}
}
.content-name {
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
.content-msg {
width: 90%;
word-break: break-word;
font-size: 16px;
p {
padding: 8px 10px;
background: #eee;
border-radius: 8px;
color: #232323;
}
}
}
.footer {
display: flex;
align-items: end;
.content-input {
flex: 1
}
.face-icon {
position: relative;
width: 56px;
height: 100%;
img {
position: absolute;
width: 26px;
height: 26px;
left: 17px;
bottom: 4px;
}
}
.send-dv {
position: relative;
width: 60px;
height: 100%;
.send-btn {
position: absolute;
width: 100%;
height: 34px;
left: 0;
bottom: 0;
}
}
}
.face-dv {
height: 150px;
background: #eee;
&.face-dv-pc {
position: absolute;
width: 100%;
left: 0px;
bottom: 53px;
}
.arrow {
position: absolute;
bottom: -20px;
right: 75px;
width: 0;
height: 0;
border: 10px solid;
border-color: #eee transparent transparent transparent;
}
.face {
width: 100%;
height: 100%;
padding: 4px;
overflow: auto;
.face-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 6px;
border-radius: 4px;
&:hover {
background: #ced8d5;
}
img {
width: 27px;
height: 27px;
}
}
}
}
}
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 3px;
background: #1c1e2038;
}
:deep(.el-textarea__inner) {
min-height: 34px !important;
}
:deep(.el-textarea__inner) {
font-size: 16px;
// 隐藏滚动条
scrollbar-width: none;
/* firefox */
-ms-overflow-style: none;
/* IE 10+ */
&::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
}</style>

注意：上面Chat.vue文件里引入了utils/utils文件里的isPC和guid方法，这两个方法分别是用来判断当前是否是pc端和生成uuid的。

2、效果图

3、部署代码到服务器

最后分别把客户端代码和服务端代码部署到服务器上就可以玩耍了

需要购买阿里云产品和服务的，点击此链接可以领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

我来回复

暂无回复内容