?這篇文章使用選項式API的寫法，以實現(xiàn)群聊和私聊為主
客戶端自然是對應(yīng)使用vue3框架，服務(wù)端使用node.js配合express、http、socket.io、file等庫來實現(xiàn)，具體如下：
一、完成客戶端部分的配置代碼
1、下載所需的依賴
npm install vue-3-socket.io socket.io-client2、做socket客戶端配置
// 引入相關(guān)依賴
import VueSocketIO from "vue-3-socket.io";
import SocketIO from "socket.io-client";
// 創(chuàng)建一個 Socket 連接
const socketio = new VueSocketIO({
debug: false, // 布爾值，控制是否打印調(diào)試信息
// SocketIO庫的客戶端連接對象，指定連接服務(wù)端的地址和傳輸方式
connection: SocketIO("http://localhost:3000", {
transports: ["websocket"],
}),
// 額外添加的請求頭信息
extraHeaders: { "Access-Control-Allow-Origin": "*" },
// SocketIO庫的配置項對象，用于控制自動連接
options: {
autoConnect: false,
},
});
注："http://localhost:3000"，該地址端口是對應(yīng)后面配置服務(wù)端時所開放的端口。
將 socketio 引入app
const app = createApp(App);
app.use(socketio)二、完成服務(wù)端的配置代碼
1、創(chuàng)建一個 node.js 項目
會的直接跳過到下一步
具體如下：
① 先新建一個項目文件夾
注：盡量不要放在前端的項目文件夾中
② 使用命令行創(chuàng)建項目
npm init -y此時生成一個json文件，如下
{
"name": "chat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
③ 在同級下建立一個index.js文件
注：這是對應(yīng)上述代碼中"main"字段的值
操作如下：
至此創(chuàng)建完畢，后面開始配置服務(wù)端socket
2、開始配置服務(wù)端socket
注：配置代碼寫在 index.js 文件
① 下載所需的依賴
npm install express file http socket.io
② 做socket服務(wù)端配置
// 引入express庫
var app = require("express")();
// 創(chuàng)建http服務(wù)器并將express應(yīng)用程序作為參數(shù)傳入
var http = require("http").Server(app);
// 引入Socket.IO庫，并將http服務(wù)器和配置選項作為參數(shù)傳入來創(chuàng)建Socket.IO實例
var io = require("socket.io")(http, {
// 允許使用EIO3協(xié)議
allowEIO3: true,
// 跨域配置，指定允許跨域的源地址、請求方法和憑據(jù)（credentials）設(shè)置
cors: {
origin: "http://localhost:3000",
methods: ["GET", "POST"],
credentials: true,
},
});
// 定義根路由"/"的GET請求處理函數(shù)
app.get("/", (req, res) => {
// 發(fā)送index.html文件作為響應(yīng)
res.sendFile(__dirname + "/index.html");
});
// 監(jiān)聽客戶端發(fā)送的連接，端口一定要和客戶端的匹配上
http.listen(3000, () => {
console.log("listening on *:3000");
});
③?啟動 node 服務(wù)端
?如果沒有啟動服務(wù)端?？蛻舳藭恢眻體ebsocket的錯，屬于正?，F(xiàn)象，啟動node項目就行了
打開chat下的終端，輸入 node index.js 啟動項目，建立網(wǎng)絡(luò)連接，客戶端就不會再報錯了
注：每次修改服務(wù)端代碼都要重新啟動一次
④?connection 鉤子的使用
// 定義根路由"/"的GET請求處理函數(shù)
app.get("/", (req, res) => {
// 發(fā)送index.html文件作為響應(yīng)
res.sendFile(__dirname + "/index.html");
});
// 新增的代碼
// 監(jiān)聽客戶端連接
io.on("connection", (socket) => {
console.log("有用戶連接");
})
// 監(jiān)聽客戶端發(fā)送的連接，端口一定要和客戶端的匹配上
http.listen(3000, () => {
console.log("listening on *:3000");
});
connection鉤子是on方法內(nèi)置的， 當(dāng)有客戶端發(fā)起連接并成功時會觸發(fā)該鉤子，效果如下
至此已經(jīng)完成所有配置，下面分別介紹怎么通過socket實現(xiàn)群聊和私聊的邏輯
三、實現(xiàn)群聊
1、服務(wù)端代碼
io.on("connection", (socket) => {
console.log("有用戶連接");
// 自定義一個chat監(jiān)聽方法，當(dāng)客戶端發(fā)布到這個方法時，我們可以獲取到發(fā)布的消息
socket.on("chat", (msg) => {
// broadcast: 是指你發(fā)送了消息，但是服務(wù)端會發(fā)送給除你之外的客戶端，不會返回給你
socket.broadcast.emit("advertise", msg);
});
});2、客戶端代碼
先寫一些基本樣式，隨意寫一下用于發(fā)送消息就行了，主要還是圍繞功能講
<template>
<div class="chat">
<div class="msgList">
<div class="item"></div>
</div>
<div class="input">
<input type="text" v-model="msg" />
<div class="btn" @click="input">send</div>
</div>
</div>
</template>
<style scoped lang="scss">
.chat {
> .input {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: 0 10px;
display: flex;
> input {
flex: 1;
padding-left: 5px;
}
> .btn {
background: #999;
padding: 3px 5px;
margin-left: 10px;
border-radius: 3px;
}
}
}
</style>
js代碼
<script>
export default {
data() {
let msg = "";
return { msg };
},
methods: {
// 發(fā)布消息方法
send() {
// 將發(fā)布到服務(wù)端
// 在服務(wù)端我們已經(jīng)寫好了對應(yīng)的監(jiān)聽方法，只要有消息發(fā)布到服務(wù)端就會被接收到
this.$socket.emit("chat", this.msg);
// 清空輸入框
this.msg = "";
},
},
// socket內(nèi)置的鉤子，用來監(jiān)聽服務(wù)端發(fā)布的方法
sockets: {
// 在服務(wù)端自定義的發(fā)布方法
advertise(msg) {
// 如果監(jiān)聽到服務(wù)端發(fā)來的信息，輸出到控制臺，這里可以寫自己的業(yè)務(wù)邏輯
console.log(msg);
},
},
};
</script>嘗試一下
先是輸入消息，然后點擊send按鈕，結(jié)果如下
在別的客戶端接收到了消息打印在控制臺中，并且發(fā)布消息的客戶端沒有監(jiān)聽到消息，至此我們就實現(xiàn)了群聊功能。
但是上述的群聊并非真正意義上的群聊，只是類似廣播的功能，將信息發(fā)布到全部客戶端中，可以用來做類似廣場這樣的功能；而群聊應(yīng)該是創(chuàng)建一個聊天室，跟socket.io中的room屬性有關(guān)，等后面再介紹這個功能。文章來源：http://www.zghlxwxcb.cn/news/detail-742646.html
這篇文章暫時寫到這里，這兩天會繼續(xù)更新私聊的功能；下篇文章會講到如何在寶塔中部署node項目并讓你的代碼在生產(chǎn)環(huán)境中正常運行，最后會在發(fā)布一篇有關(guān)群聊的文章，如果有疑惑可以在評論區(qū)留言，我每天都會追蹤最新動態(tài)，如果有幫助就留下你的贊或關(guān)注吧文章來源地址http://www.zghlxwxcb.cn/news/detail-742646.html
到了這里，關(guān)于使用 vue-3-socket.io 插件以及node.js實現(xiàn)實時聊天（1）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
