vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程
一、背景
1. 前端使用vue + vuex + socket.io-client
npm install socket.io-client --save-dev
2. 后端使用node + express + socketio
1.搭建node開發(fā)環(huán)境
npm init -y
安裝所需依賴
npm install express --save-dev
npm install socket.io-client --save-dev
二、 socket.io相關(guān)用法概覽
1. 發(fā)送事件
socket.emit('事件名', data => {
// data為要傳輸?shù)臄?shù)據(jù),可以為boolean, string, number, object等
})
2. 監(jiān)聽事件
socket.on('發(fā)送時(shí)的事件名', data => {
// data發(fā)送事件傳過來的數(shù)據(jù)
})
3. 廣播事件
// 發(fā)送給其他用戶 (不對本身發(fā)送)
socket.broadcast.emit('事件名', data => {
// data為要傳輸?shù)臄?shù)據(jù),可以為boolean, string, number, object等
})
三、開發(fā)流程
1. 前端新建一個(gè)socket.js文件, 用于接收socket相關(guān)事件,具體如下
// 引入socket.io-client
import io from 'socket.io-client'
// 創(chuàng)建鏈接
const socket = io()
// 監(jiān)聽
socket.on('connect', () => {
console.log('和服務(wù)器連接成功?。?)
})
> =============中間部分用于監(jiān)聽后端發(fā)送的socket事件,例如:=====================
// 進(jìn)入房間
socket.on('enter_room', (data) => {
// 必要數(shù)據(jù)可存storage
localStorage.setItem('counts', JSON.stringify(data))
store.commit('setData', JSON.parse(localStorage.getItem('data')))
})
// 處理服務(wù)失去連接
socket.on('disconnect', () => {
console.log('disconnect')
})
2. 后端部分相關(guān)代碼
const app = require('express')()
const http = require('http').Server(app)
var io = require('socket.io')(http)
let onlineUsers = {}
let users = []
let onlineCounts = 0
io.on('connection', socket => {
// 用戶進(jìn)入游戲
socket.on('enter', (data) =>
// 添加用戶信息
const sid = socket.id
socket.name = data.name
// 添加新用戶
if(!onlineUsers.hasOwnProperty(data.name)) {
onlineUsers[data.name] = sid
onlineCounts++
}
if (!users.length) {
users.push({
name: onlineUsers[sid]
})
}
// 當(dāng)前人數(shù)
let clientsCount = io.sockets.server.engine.clientsCount
// 發(fā)送用戶列表給當(dāng)前用戶(對應(yīng)前端監(jiān)聽enter_room部分代碼)
io.emit('enter_room', {
role: data.role,
users,
onlineCounts
})
// 發(fā)送新進(jìn)用戶給其他用戶 (不對本身發(fā)送)
socket.broadcast.emit('user_enter', data.name)
})
})
// 后端開啟監(jiān)聽端口, 前端通過配置proxyTable處代理到后端服務(wù)器,即可進(jìn)行前后端數(shù)據(jù)對接
http.listen(port, () => {
console.log('后端服務(wù)器啟動(dòng)成功!??!')
})
四、發(fā)布上線
1.前端:
1)安裝http-server,然后鏈接服務(wù)器,進(jìn)入服務(wù)器后拉取遠(yuǎn)程倉庫的前端代碼(一般在服務(wù)器www目錄下拉?。?,如果沒有克隆過代碼,需要在服務(wù)器配置公鑰,才能進(jìn)行下載
公鑰配置
ssh-keygen -t rsa -C "你的郵箱"
生成公鑰后,進(jìn)入公鑰生成的文件目錄,復(fù)制到代碼托管平臺(tái),添加公鑰后就可以克隆代碼咯
2)打包前端代碼,生成dist文件
npm run build
3)進(jìn)入dist,執(zhí)行命令,即可啟動(dòng)前端
pm2 start http-server -- -p 指定端口號
4)前端訪問,服務(wù)器地址+端口號
2.后端:
1)和前端一樣(不用安裝http-server),進(jìn)入服務(wù)器后拉取遠(yuǎn)程倉庫的前端代碼(一般在服務(wù)器www目錄下拉?。?,如果沒有克隆過代碼,需要在服務(wù)器配置公鑰,才能進(jìn)行下載
2)執(zhí)行命令
pm2 start index.js(文件入口,如果你的是app.js為文件入口,就執(zhí)行app.js) -- -p 指定端口號
注意點(diǎn):
socket.io在發(fā)布線上的時(shí)候前端得修改socket.io代理地址端口為后端端口,否則會(huì)報(bào)404,修改位置如下(這里我的后端端口為3000)

2. nginx需要修改socket.io的代理轉(zhuǎn)發(fā)地址,否則也會(huì)報(bào)404
補(bǔ)充 1.pm2 常用指令
pm2 list // 查看pm2啟動(dòng)列表
pm2 stop 指定端口號 // 停止當(dāng)前端口下的pm2
pm2 restart 指定端口號 // 重啟指定端口的pm2
pm2 delete 指定端口號 // 刪除當(dāng)前窗口下的pm2
pm2 start http-server / index.js -- -p 指定端口號 // 啟動(dòng)對應(yīng)的前后端
2. nginx在命令行中的相關(guān)指令
cd /nginx指定目錄
cat nginx.conf // 查看nginx文件內(nèi)容
vim nginx.conf // 編輯nginix,注意進(jìn)入后使用 "i"進(jìn)行編輯模式;"u"撤銷上一步編輯;"esc"退出編輯模式;"shift + :"保存并退出
至此,按照上述步驟,就可以進(jìn)行socket相關(guān)的任何類型開發(fā)拉,快去試試吧,有問題的小伙伴記得留言哦_
到此這篇關(guān)于vue+node+socketio實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程的文章就介紹到這了,更多相關(guān)vue socketio實(shí)現(xiàn)多人互動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue 數(shù)值改變頁面沒有刷新的問題解決(數(shù)據(jù)改變視圖不更新的問題)
這篇文章主要介紹了Vue 數(shù)值改變頁面沒有刷新的問題解決(數(shù)據(jù)改變視圖不更新的問題),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue 解決provide和inject響應(yīng)的問題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue+ElementUI創(chuàng)建一個(gè)帶有進(jìn)度顯示的文件下載和打包組件功能
如何使用 Vue 創(chuàng)建一個(gè)帶有進(jìn)度顯示和打包功能的文件下載組件,我們探討了如何導(dǎo)入必要的包,構(gòu)建組件的基礎(chǔ)結(jié)構(gòu),實(shí)現(xiàn)文件下載與進(jìn)度顯示,以及如何將文件打包為 ZIP 格式供用戶下載2024-08-08

