目录

1.介绍

2.环境搭建

3.本功能实现的主要逻辑

4.客户端和服务端的主要代码

5.效果展示

6.socket.io的运作原理

1.介绍

本篇主要讲讲基于Socket.IO实现单聊功能的主要实现，包括了客户端和服务端Node。

在这个即时通讯无处不在的时代，实时聊天功能已经成为我们日常生活和工作中不可或缺的一部分。无论是与朋友闲聊，还是与同事协作，单聊功能都是构建任何通讯平台的基石。今天，我们将一起探索如何利用前端界的新星——Vue 3，以及后端的强大工具——Node.js，结合实时通讯的利器Socket.IO，来打造一个高效、稳定的单聊应用。

在本篇文章中，我们将从零开始，一步步搭建起一个简单的单聊系统。我们会深入了解Vue 3的新特性，如Composition API，以及如何利用它们来构建响应式的用户界面。同时，我们也会探索Node.js的强大功能，以及如何通过Socket.IO实现实时数据的双向传输。

无论你是Vue的新手，还是希望将Socket.IO集成到现有Node.js应用中的开发者，本文都将为你提供实用的指导和深入的见解。我们将一起走过环境搭建、服务端设置、客户端实现、消息格式设计等关键步骤，最终实现一个完整的单聊功能。

2.环境搭建

前端可以使用Vue cli 或者使用 vite都可以，后端使用任何框架也可以，本案例中使用的是express框架。

当然，无论使用哪种方式，我们都得先下载socket.io

npm install socket.io
pnpm add socket.io
yarn add socket.io

或者是使用cdn:socket.io的cnd

然后我们需要搭建一些必要的代码框架，来展示单聊的功能。

在实际的聊天功能中的业务肯定比我这个案例要复杂的多，我这里就是只做一个demo，没有数据库的一些操作，就是实现单聊（单发信息）的功能。

客户端的设计：

  • 我们可以实时的看到所有在线的用户，（聊天肯定有一个username，或者id，我们的这个username主要通过url中的query参数获取，这样可以不用操作数据库）
  • 可以给单独某个用户发送信息，页面会渲染发送的信息详情。

服务端设计：

  • 可以给客户端提供连接socket
  • 可以实时的存储当前在线的用户并发送给客户端
  • 可以接收消息给单独某个用户发送

3.本功能实现的主要逻辑

单聊是这篇文章的主要功能，其实其他很多的连接，是否断连，推送消息，接收消息等等功能从socket.io的官网的基础教程中就可以找到，主要是这个单聊的逻辑。

我们可以在客户端建一个user的数组，只要一有人连接，就往当中存储必要的username和userid，（注意这里的id是socket.io连接时创建的，每次都不唯一），如果有重连的就替换成新的id，有断连的就从当中剔除，然后再接收数据时可以查找到对应的id，给其单独的推送消息即可。

let userList = [] 
//监听接收消息的对象
  socket.on('sendMessage', (data) => {
    const targetSocket = io.sockets.sockets.get(data.id)
    const targetUser = userList.find((user) => user.id === data.id)
    if (targetSocket) {
      targetSocket.emit('receiveMessage', {
        sendForm: data.sendForm,
        toUser: targetUser.username,
        message: data.message,
        date: new Date().getTime()
      })
    }
  })

我们主要的还是通过id去进行单独推送信息。

然后客户端可以监听此信息，去接受服务端发来的数据

//监听接收信息
  socket.on("receiveMessage", (data) => {
    messageList.value.push(data)
  })

4.客户端和服务端的主要代码

客户端：

<template>
  <div>
    <!-- <router-view></router-view> -->
    <button @click="createWebSocketConnection">建立Websocket连接</button>
    <button @click="close">主动断开连接</button>
    <ul>
      <li v-for="i in userList" :key="i.id" @click="chooseUser = i.username, chooseid = i.id"
        :class="{ active: i.username === chooseUser }">{{ i.username }}</li>
    </ul>
    <div class="text">
      <input type="text" v-model="message" @focus="handleFocus" @blur="handleBlur">
      <button @click="sendMessage">发送信息</button>
    </div>
    <h1>{{ typing }}</h1>

    <!-- 聊天内容 -->
    <div class="chat">
      <ul>
        <li v-for="i in messageList" :key="i.id">
          <p>发送者：{{ i.sendForm }} ,接收者：{{ i.toUser }},内容：{{ i.message }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { io } from "socket.io-client";
import { useRoute } from "vue-router";
import { onUnmounted, ref } from 'vue'
const $route = useRoute()
const userList = ref([])
const message = ref('')
const messageList = ref([])
//选择当前需要发送信息的对象
const chooseUser = ref('')
const chooseid = ref('')
//谁正在输入中
const typing = ref('')
let socket = null
const createWebSocketConnection = () => {
  //随机生成一个username

  socket = io("http://localhost:5000", {
    query: { username: $route.query.username },
  });
  socket.on('connect', () => {
    console.log('连接成功')
    console.log(socket.id);
  })
  socket.on("disconnect", () => {
    console.log('断开连接'); // undefined
  });

  socket.on("userList", (data) => {
    userList.value = data
  })
  //监听接收信息
  socket.on("receiveMessage", (data) => {
    messageList.value.push(data)
  })
  socket.on('receiveTyping', (data) => {
    console.log(data);
    typing.value = data.message
  })
  socket.on('receiveStopTyping', (id) => {
    typing.value = ''
  })
}
const closeWebSocket = () => {
  socket.close()
}
const sendMessage = () => {
  //发送信息
  const messageData = {
    //发送对象
    sendForm: $route.query.username,
    //接受对象
    receiveForm: chooseUser.value,
    //时间
    time: new Date(),
    id: chooseid.value,
    message: message.value
  }
  socket.emit("sendMessage", messageData)
}
//监听用户正在输入中
const handleFocus = () => {
  const data = {
    username: $route.query.username,
    tousername: chooseUser.value,
    id: chooseid.value,
    message: `${$route.query.username} 正在输入中...`
  }
  socket.emit('typing', data)
}
//监听用户停止输入
const handleBlur = () => {
  socket.emit('stopTyping', chooseid.value)
}
const close = () => {
  socket.emit('close', $route.query.username)
  closeWebSocket()
}
onUnmounted(() => {
  close()
})


</script>

<style lang="css" scoped>
.active {
  color: red;
}
</style>

服务端：

const express = require('express')

const app = express()
const { Server } = require('socket.io')
app.get('/', (req, res) => {
  res.send('Hello World!')
})

//创建websocket服务器
const io = new Server(5000, {
  cors: {
    origin: '*' //配置跨域
  }
})
let userList = []

//监听事件
io.on('connection', (socket) => {
  console.log('a user connected')
  const username = socket.handshake.query.username
  if (!username) {
    return
  }

  const userinfo = userList.find((user) => user.username === username)

  if (userinfo) {
    //存在
    userinfo.id = socket.id
  } else {
    userList.push({
      id: socket.id,
      username
    })
  }
  console.log(userList)
  socket.on('disconnect', () => {
    console.log('user disconnected')
  })

  //发送事件
  io.emit('userList', userList)

  //监听接收消息的对象
  socket.on('sendMessage', (data) => {
    const targetSocket = io.sockets.sockets.get(data.id)
    const targetUser = userList.find((user) => user.id === data.id)
    if (targetSocket) {
      targetSocket.emit('receiveMessage', {
        sendForm: data.sendForm,
        toUser: targetUser.username,
        message: data.message,
        date: new Date().getTime()
      })
    }
  })
  //监听断开连接的信息
  socket.on('close', (username) => {
    userList = userList.filter((user) => user.username !== username)
    console.log(userList)
    io.emit('userList', userList)
  })
  //监听谁正在输入的事件
  socket.on('typing', (data) => {
    const targetSocket = io.sockets.sockets.get(data.id)
    if (targetSocket) {
      targetSocket.emit('receiveTyping', data)
    }
  })
  //监听停止输入的事件
  socket.on('stopTyping', (id) => {
    const targetSocket = io.sockets.sockets.get(id)
    if (targetSocket) {
      targetSocket.emit('receiveStopTyping')
    }
  })
})

app.listen(3000)

5.效果展示

效果是显而易见的，整体实现了单聊的效果。

6.socket.io的运作原理

Socket.IO 的运作原理涉及到几个关键的技术和概念，以实现实时的双向通信。以下是 Socket.IO 的基本运作原理：

1. 基于 WebSocket 的通信

  • WebSocket 是一种提供全双工通信通道的协议，允许服务器和客户端之间进行实时数据交换。Socket.IO 在底层默认使用 WebSocket 作为传输层，因为它提供了最快和最直接的通信方式。

2. 自动传输升级

  • 当客户端尝试与服务器建立连接时，Socket.IO 会首先尝试使用 WebSocket。如果浏览器或网络环境不支持 WebSocket，Socket.IO 会自动降级到其他可用的传输方式，如长轮询（Long-Polling）。

3. 事件驱动的接口

  • Socket.IO 提供了一个事件驱动的接口，允许开发者在客户端和服务器端监听和发射（emit）事件。这意味着除了简单的数据传输，Socket.IO 还支持复杂的交互模式，如实时游戏、协作编辑等。

4. 心跳包

  • 为了维持连接的活跃状态并检测连接是否仍然有效，Socket.IO 定期在客户端和服务器之间发送心跳包。如果在一定时间内没有收到响应，Socket.IO 会认为连接已断开，并尝试重新连接。

5. 房间和命名空间

  • Socket.IO 允许创建房间（rooms）和命名空间（namespaces），以便对通信进行分组和隔离。这样，不同的用户可以被添加到不同的房间，或者在不同的命名空间中通信，而不会互相干扰。

6. 广播和去中心化通信

  • 服务器可以向所有连接的客户端广播消息，也可以向特定的客户端或房间发送消息。此外，Socket.IO 支持去中心化通信，客户端可以直接向其他客户端发送消息，而无需通过服务器中转。

7. 断开重连

  • 如果客户端与服务器的连接断开，Socket.IO 会尝试自动重连。它会尝试使用不同的传输方式，直到重新建立连接。这个过程对用户来说是透明的，不会影响应用的实时性。

8. 状态管理

  • Socket.IO 管理每个连接的状态，包括连接、断开、重连等。服务器和客户端都可以监听这些状态变化，并根据状态执行相应的操作。

通过这些机制，Socket.IO 能够在各种网络环境下提供稳定的实时通信能力，使其成为构建实时应用的强大工具。开发者可以专注于业务逻辑的实现，而不必过多担心底层的通信细节。

具体的可以查看官方文档：socket.io的运作原理

# node.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue