Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼

更新時間：2022年01月23日 09:48:47 作者：高級前端小白

本文主要介紹了Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

要想實現(xiàn)一對一實時聊天，我們需要使用 websocket 協(xié)議，目前流行的瀏覽器都支持這個協(xié)議。

node.js提供了高效的服務(wù)端運行環(huán)境，但是由于瀏覽器端對HTML5的支持不一，為了兼容所有瀏覽器，提供卓越的實時的用戶體驗，并且為程序員提供客戶端與服務(wù)端一致的編程體驗，于是Socket.io誕生。

Socket.io將Websocket和輪詢機制以及其它的實時通信方式封裝成了通用的接口，并且在服務(wù)端實現(xiàn)了這些實時機制的相應(yīng)代碼。

全部代碼已開源：github.com/HJianfeng/socket

前端部分

前端部分我們使用 Vue3 + ElementUI 作為框架，具體創(chuàng)建項目就不細講了，大家可以參考我前兩篇文章。

樣式搭建

首先我們需要寫一個簡單的樣式。創(chuàng)建頁面 src/views/home.vue 并添加相關(guān)html和樣式

// src/views/home.vue
<template>
? <div class="container">
? ? <div class="chat-content">
? ? ? <template v-if="chatList && chatList.length">
? ? ? ? <div
? ? ? ? ? v-for="(chat, index) in chatList"
? ? ? ? ? class="message-box"
? ? ? ? ? :class="{'right-message': chat.user.id === userInfo.user.id}"
? ? ? ? ? :key="index"
? ? ? ? >
? ? ? ? ? <div class="user">
? ? ? ? ? ? <el-avatar v-if="chat.user.id !== userInfo.user.id" class="avatar" :src="chat.user.avatar" ></el-avatar>
? ? ? ? ? ? <div class="info">
? ? ? ? ? ? ? <div class="name">{{chat.user.name}}</div>
? ? ? ? ? ? ? <div class="time">{{chat.createTime}}</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <el-avatar v-if="chat.user.id === userInfo.user.id" class="avatar" :src="chat.user.avatar" ></el-avatar>
? ? ? ? ? </div>
? ? ? ? ? <div class="message"><div class="block">{{chat.message}}</div></div>
? ? ? ? </div>
? ? ? </template>
? ? ? <div v-else class="empty">
? ? ? ? 沒有消息
? ? ? </div>
? ? </div>
? ? <div class="chat-bottom">
? ? ? <el-input v-model="chatMsg" class="chat-input" placeholder="請輸入內(nèi)容" />
? ? ? <el-button class="chat-btn" type="primary" @click="sendMsg">發(fā)送</el-button>
? ? </div>
? ? <div style="margin-top: 10px;">當前用戶：
? ? ? <el-select v-model="userInfo.user" value-key="id" @change="selectUser" placeholder="Select">
? ? ? ? <el-option
? ? ? ? ? v-for="item in userList"
? ? ? ? ? :key="item.id"
? ? ? ? ? :label="item.name"
? ? ? ? ? :value="item"
? ? ? ? >
? ? ? ? </el-option>
? ? ? </el-select>
? ? </div>
? </div>
</template>

<script>
import { ref } from 'vue';

const avatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
export default {
? name: 'HomePage',
? setup() {
? ? const chatList = ref([]); // 消息列表
? ? const chatMsg = ref('');
? ? const userList = [{ name: '用戶1', id: 0, avatar }, { name: '用戶2', id: 1, avatar }]; // 用戶列表，總共有兩個用戶
? ? const userInfo = reactive({ user: userList[0] }); // 當前登錄的用戶
? ? const selectUser = (user) => {
? ? ? ? // 切換當前登錄的用戶
? ? ? userInfo.user = user;
? ? };
? ? return {
? ? ? chatMsg,
? ? ? chatList,
? ? ? userList,
? ? ? userInfo,
? ? ??
? ? ? selectUser
? ? };
? },
};
</script>

<style lang="scss" scoped>
...
</style>

定義一個用戶列表 userList 和當前登錄的用戶信息，可以通過下拉選項隨時切換當前用戶

樣式部分我就不貼出來了，大家可以直接去倉庫查看。完成后我們的靜態(tài)效果是這樣的。

socket.io-client

我們需要安裝socket.io的客戶端包

npm i socket.io-client

打開 src/views/home.vue

// src/views/home.vue
<template>
...
</template>
<script>
import { onMounted, ref, reactive } from 'vue';
import io from 'socket.io-client';

const avatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';

export default {
? name: 'HomePage',
? setup() {
? ? const chatList = ref([]);
? ? const chatMsg = ref('');
? ? const userList = [{ name: '用戶1', id: 0, avatar }, { name: '用戶2', id: 1, avatar }];
? ? const userInfo = reactive({ user: userList[0] });
? ? let socket;
? ? onMounted(() => {
? ? ? socket = io('http://localhost:3001'); // 連接后端的 socket.io 方法里面?zhèn)鞣?wù)端的ip
? ? ? socket.on('connect', () => {
? ? ? ? console.log(socket.id, '監(jiān)聽客戶端連接成功-connect');
? ? ? });
? ? ? socket.on('fresh-message', (data) => {
? ? ? ? // 自定義一個事件來獲取，服務(wù)端推送回來的消息列表
? ? ? ? chatList.value = data;
? ? ? });
? ? });
? ? const selectUser = (user) => {
? ? ? ? // 切換當前登錄的用戶
? ? ? userInfo.user = user;
? ? };
? ? const sendMsg = () => {
? ? ? // 發(fā)送消息，通過自定義事件 send-message
? ? ? socket.emit('send-message', userInfo.user, chatMsg.value);
? ? ? chatMsg.value = '';
? ? };
? ? return {
? ? ? chatMsg,
? ? ? chatList,
? ? ? userList,
? ? ? userInfo,

? ? ? sendMsg,
? ? ? selectUser,
? ? };
? },
};
</script>

自定義了兩個事件send-message和fresh-message，其中send-message用來向服務(wù)端發(fā)送消息，fresh-message獲取消息列表

后端部分

后端部分的代碼比較簡單，使用Koa.js 框架，首先安裝相關(guān)依賴

npm install --save koa moment http socket.io

根目錄 app.js

// app.js
const Koa = require('koa');
const http = require('http');
const { Server } = require('socket.io');
const moment = require('moment');

const app = new Koa();

const chatList = [];
const server = http.createServer(app.callback());
const io = new Server(server, {
? serveClient: false,
? cors: {
? ? origin: '*', // from the screenshot you provided
? ? methods: ['GET', 'POST'],
? },
});

io.on('connection', (socket) => {
? socket.emit('fresh-message', chatList);
? socket.on('send-message', (user, message) => {
? ? const createTime = moment().format('YYYY-MM-DD HH:mm:ss');
? ? chatList.push({
? ? ? user,
? ? ? message,
? ? ? createTime,
? ? });
? ? socket.emit('fresh-message', chatList);
? });
});
io.listen(3001);

代碼很簡單，定義一個 chatList 變量來保存消息列表，監(jiān)聽事件send-message，觸發(fā)后保存消息和創(chuàng)建時間。然后再觸發(fā)fresh-message發(fā)送給客戶端