一、背景

 1. 前端使用vue + vuex + socket.io-client

npm install socket.io-client --save-dev

2. 后端使用node + express + socketio

1.搭建node開(kāi)發(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)聽(tīng)事件

socket.on('發(fā)送時(shí)的事件名', data => {
	// data發(fā)送事件傳過(guò)來(lái)的數(shù)據(jù)
})

3. 廣播事件

// 發(fā)送給其他用戶 （不對(duì)本身發(fā)送）
socket.broadcast.emit('事件名',  data => {
	// data為要傳輸?shù)臄?shù)據(jù)，可以為boolean, string, number, object等
})

三、開(kāi)發(fā)流程

1. 前端新建一個(gè)socket.js文件， 用于接收socket相關(guān)事件，具體如下

// 引入socket.io-client
import io from 'socket.io-client'

// 創(chuàng)建鏈接
const socket = io()

// 監(jiān)聽(tīng)
socket.on('connect', () => {
  console.log('和服務(wù)器連接成功??！')
})

> =============中間部分用于監(jiān)聽(tīng)后端發(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)前用戶(對(duì)應(yīng)前端監(jiān)聽(tīng)enter_room部分代碼)
		io.emit('enter_room', {
			role: data.role,
			users,
			onlineCounts
		})
		// 發(fā)送新進(jìn)用戶給其他用戶 （不對(duì)本身發(fā)送）
		socket.broadcast.emit('user_enter', data.name)
	})
})

// 后端開(kāi)啟監(jiān)聽(tīng)端口， 前端通過(guò)配置proxyTable處代理到后端服務(wù)器，即可進(jìn)行前后端數(shù)據(jù)對(duì)接
http.listen(port, () => {
	console.log('后端服務(wù)器啟動(dòng)成功！！！')
})

四、發(fā)布上線

1.前端：

1）安裝http-server，然后鏈接服務(wù)器，進(jìn)入服務(wù)器后拉取遠(yuǎn)程倉(cāng)庫(kù)的前端代碼（一般在服務(wù)器www目錄下拉取），如果沒(méi)有克隆過(guò)代碼，需要在服務(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 指定端口號(hào)

4）前端訪問(wèn)，服務(wù)器地址+端口號(hào)

2.后端：

1）和前端一樣（不用安裝http-server），進(jìn)入服務(wù)器后拉取遠(yuǎn)程倉(cāng)庫(kù)的前端代碼（一般在服務(wù)器www目錄下拉?。绻麤](méi)有克隆過(guò)代碼，需要在服務(wù)器配置公鑰，才能進(jìn)行下載
2）執(zhí)行命令

pm2 start index.js(文件入口，如果你的是app.js為文件入口,就執(zhí)行app.js) -- -p 指定端口號(hào)

注意點(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 指定端口號(hào) // 停止當(dāng)前端口下的pm2
pm2 restart 指定端口號(hào) // 重啟指定端口的pm2
pm2 delete 指定端口號(hào) // 刪除當(dāng)前窗口下的pm2
pm2 start http-server / index.js -- -p  指定端口號(hào) // 啟動(dòng)對(duì)應(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)的任何類型開(kāi)發(fā)拉，快去試試吧，有問(wèn)題的小伙伴記得留言哦_

到此這篇關(guān)于vue+node+socketio實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程的文章就介紹到這了,更多相關(guān)vue socketio實(shí)現(xiàn)多人互動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論