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

本文简单介绍使用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

巴特西