Vue.js中集成Socket.IO實(shí)現(xiàn)實(shí)時(shí)聊天功能
更新時(shí)間：2024年12月04日 11:28:18 作者：前端青山
隨著 Web 技術(shù)的發(fā)展,實(shí)時(shí)通信成為現(xiàn)代 Web 應(yīng)用的重要組成部分,Socket.IO 是一個(gè)流行的庫(kù),支持及時(shí)、雙向與基于事件的通信,適用于各種平臺(tái)和設(shè)備,本文將介紹如何在 Vue.js 項(xiàng)目中集成 Socket.IO,實(shí)現(xiàn)一個(gè)簡(jiǎn)單的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下
前言
隨著 Web 技術(shù)的發(fā)展，實(shí)時(shí)通信成為現(xiàn)代 Web 應(yīng)用的重要組成部分。Socket.IO 是一個(gè)流行的庫(kù)，支持及時(shí)、雙向與基于事件的通信，適用于各種平臺(tái)和設(shè)備。本文將介紹如何在 Vue.js 項(xiàng)目中集成 Socket.IO，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的實(shí)時(shí)聊天應(yīng)用。通過(guò)本文，讀者將學(xué)習(xí)到如何設(shè)置服務(wù)器端和客戶端的 Socket.IO 連接，以及如何處理消息的發(fā)送和接收
1. socket.io
支持及時(shí)、雙向與基于事件的交流。它可以在每個(gè)平臺(tái)、每個(gè)瀏覽器和每個(gè)設(shè)備上工作，可靠性和速度同樣穩(wěn)定。
1.1 創(chuàng)建項(xiàng)目 chat-example
$ npm init -y $ cnpm i express@4 -S $ cnpm i socket.io -S
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hello world</h1>');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
$ node index.js
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
app.get('/', (req, res) => {
// res.send('<h1>Hello world</h1>');
res.sendFile(__dirname + '/index.html');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
// 構(gòu)建socket服務(wù)
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
// res.send('<h1>Hello world</h1>');
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</html>
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
// 構(gòu)建socket服務(wù)
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
// res.send('<h1>Hello world</h1>');
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
// 點(diǎn)擊發(fā)送，向服務(wù)器發(fā)送了一個(gè)名為 chat message的事件
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
</script>
</html>
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
// 構(gòu)建socket服務(wù)
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
// res.send('<h1>Hello world</h1>');
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
// index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
// 構(gòu)建socket服務(wù)
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
// res.send('<h1>Hello world</h1>');
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg); // 給前端廣播接收到的消息
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
// 點(diǎn)擊發(fā)送，向服務(wù)器發(fā)送了一個(gè)名為 chat message的事件
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</html>
如果想要加入昵稱 - 傳對(duì)象
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="nickname" placeholder="昵稱" />
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
var nickname = document.getElementById('nickname');
// 點(diǎn)擊發(fā)送，向服務(wù)器發(fā)送了一個(gè)名為 chat message的事件
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', {
name: nickname.value,
value: input.value
});
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg.name + ':' + msg.value;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</html>
總結(jié)
通過(guò)本文的介紹，我們成功地在 Vue.js 項(xiàng)目中集成了 Socket.IO，實(shí)現(xiàn)了基本的實(shí)時(shí)聊天功能。我們從創(chuàng)建項(xiàng)目開(kāi)始，逐步配置了 Express 和 Socket.IO 服務(wù)器，并在客戶端通過(guò) HTML 和 JavaScript 實(shí)現(xiàn)了消息的發(fā)送和接收。此外，我們還加入了昵稱功能，使聊天更加個(gè)性化。
以上就是Vue.js中集成Socket.IO實(shí)現(xiàn)實(shí)時(shí)聊天功能的詳細(xì)內(nèi)容，更多關(guān)于Vue Socket.IO實(shí)時(shí)聊天的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue3中＜script?setup＞?和?setup函數(shù)的區(qū)別對(duì)比
這篇文章主要介紹了vue3中＜script?setup＞?和?setup函數(shù)的區(qū)別,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue父子組建的簡(jiǎn)單通信之控制開(kāi)關(guān)Switch的實(shí)現(xiàn)
這篇文章主要介紹了Vue父子組建的簡(jiǎn)單通信之控制開(kāi)關(guān)Switch的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要為大家介紹了vue實(shí)現(xiàn)At人文本輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue中自定義組件雙向綁定的三種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Python實(shí)現(xiàn)圖片二值化的詳細(xì)代碼
圖像二值化就是將圖像上的像素點(diǎn)的“灰度值”設(shè)置為[0,?0,?0]或[255,?255,?255],即要么純黑,要么純白,這篇文章主要介紹了Python實(shí)現(xiàn)圖片二值化,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動(dòng)加載jquery的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
本篇文章主要介紹了Vue2 SSR 緩存 Api 數(shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue中使一個(gè)div鋪滿全屏的實(shí)現(xiàn)
最近在項(xiàng)目開(kāi)發(fā)中,就遇到了這個(gè)問(wèn)題,Vue中如何使一個(gè)div鋪滿全屏,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
vue2實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08