Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼
前言
要想實現(xiàn)一對一實時聊天,我們需要使用 websocket 協(xié)議,目前流行的瀏覽器都支持這個協(xié)議。
node.js提供了高效的服務端運行環(huán)境,但是由于瀏覽器端對HTML5的支持不一,為了兼容所有瀏覽器,提供卓越的實時的用戶體驗,并且為程序員提供客戶端與服務端一致的編程體驗,于是Socket.io誕生。
Socket.io將Websocket和輪詢機制以及其它的實時通信方式封裝成了通用的接口,并且在服務端實現(xiàn)了這些實時機制的相應代碼。
全部代碼已開源:github.com/HJianfeng/socket
前端部分
前端部分我們使用 Vue3 + ElementUI 作為框架,具體創(chuàng)建項目就不細講了,大家可以參考我前兩篇文章。
樣式搭建
首先我們需要寫一個簡單的樣式。創(chuàng)建頁面 src/views/home.vue 并添加相關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)鞣斩说膇p ? ? ? socket.on('connect', () => { ? ? ? ? console.log(socket.id, '監(jiān)聽客戶端連接成功-connect'); ? ? ? }); ? ? ? socket.on('fresh-message', (data) => { ? ? ? ? // 自定義一個事件來獲取,服務端推送回來的消息列表 ? ? ? ? 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用來向服務端發(fā)送消息,fresh-message獲取消息列表
后端部分
后端部分的代碼比較簡單,使用Koa.js 框架,首先安裝相關依賴
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ā)送給客戶端
總結
文中只創(chuàng)建了兩個用戶做為示例,如果希望做得更好的話,可以新增一個創(chuàng)建用戶的頁面,這樣就能同時很多個用戶一起聊天了。
到此這篇關于Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼的文章就介紹到這了,更多相關Vue3+NodeJS+Soket.io實時聊天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue實現(xiàn)表格中對數(shù)據(jù)進行轉(zhuǎn)換、處理的方法
這篇文章主要介紹了Vue實現(xiàn)表格中對數(shù)據(jù)進行轉(zhuǎn)換、處理的方法,需要的朋友可以參考下2018-09-09webpack+vue-cli項目中引入外部非模塊格式js的方法
今天小編就為大家分享一篇webpack+vue-cli項目中引入外部非模塊格式js的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09