vue node 部署,vue web socket
本文主要介绍vue节点socket io实现多人交互和在线发布的全过程。本文向您概述了socket.io的相关用法和开发过程。有需要的朋友可以参考一下。
一、背景
1.前端使用vuevuxsocket.io-client。
npm安装套接字. io-client - save-dev
2.后端使用node express套接字
1.构建节点开发环境。
npm初始化-y
安装所需的依赖项
npm快速安装-保存-开发
npm安装套接字. io-client - save-dev
二、 socket.io相关用法概览
1.发送事件
Socket.emit(事件名称，数据={
//data是要传输的数据，可以是布尔值、字符串、数字、对象等。
})
2.监控事件
Socket.on(发送时的事件名称，data={
//data发送事件中的数据。
})
3.广播事件
//发送给其他用户(不是自己)
Socket.broadcast.emit(事件名称，数据={
//data是要传输的数据，可以是布尔值、字符串、数字、对象等。
})
三、开发流程
1.在前端创建一个新的socket.js文件来接收与套接字相关的事件，如下所示
//介绍socket.io-client
从“socket.io-client”导入io
//创建链接
const socket=io()
//监控
socket.on(connect ，()={
Console.log()已成功连接到服务器！)
})
===========中间部分用于监听后端发送的套接字事件，例如：====================
//进入房间
socket.on(enter_room ，(data)={
//必要的数据可以存储在存储器中。
localStorage.setItem(counts ，JSON.stringify(data))
store.commit(setData ，JSON . parse(local storage . getitem( data ))
})
//处理服务丢失连接
socket.on(disconnect ，()={
console.log(断开)
})
2.后端相关代码
const app=require(express )()
const http=require(http )。服务器(应用程序)
var io=require( socket . io )(http)
let onlineUsers={}
让用户=[]
设onlineCounts=0
io.on(连接，套接字={
//用户进入游戏
socket.on(enter ，(data)=0
//添加用户信息
const sid=socket.id
socket.name=data.name
//添加新用户
如果(！online users . hasownproperty(data . name)){
onlineUsers[data.name]=sid
在线计数
}
如果(！users.length) {
users.push({
名称：onlineUsers[sid]
})
}
//当前人数
let clients count=io . sockets . server . engine . clients count
//将用户列表发送给当前用户(对应前端监控enter_room的代码)
io.emit(enter_room ，{
角色：数据.角色，
用户，
在线计数
})
//将新用户发送给其他用户(而不是自己)
socket.broadcast.emit(用户输入，数据.名称)
})
})
//后端打开监控端口，前端通过在proxyTable配置代理将前端数据与后端服务器连接起来。
http.listen(port，()={
Console.log(后端服务器启动成功！)
})
四、发布上线
1.前端：
1)安装http-server，然后链接服务器，进入服务器后拉远程仓库的前端代码(一般是从服务器的www目录)。如果没有代码被克隆，您需要在下载之前在服务器中配置公钥。
公钥配置
Ssh-keygen -t rsa -C 您的邮箱
生成公钥后，进入公钥生成的文件目录，复制到代码托管平台。添加公钥后，您可以克隆代码。
2)封装前端代码，生成dist文件
npm运行构建
3)输入dist，执行命令启动前端。
2 pm2启动http-server - -p指定端口号
4)前端访问、服务器地址和端口号
2.后端：
1)和前端一样(不安装http-server)，进入服务器后，拉远程仓库的前端代码(一般是从服务器的www目录)。如果代码没有被克隆，您需要在下载之前在服务器中配置公钥。
2)执行命令
2 pmstartindex.js(文件入口，如果你的app.js是文件入口，执行app . js)---p指定端口号。
注意：
socket.io在线发布时，前端要把socket.io代理地址端口改成后端端口；否则，它将报告404。更改位置如下(这里，我的后端端口是3000)
2.nginx需要修改socket.io的代理转发地址，否则会报告404。
1.补充1.pm2通用说明
Pm2列表//查看pm2启动列表
Pm2 stop指定当前端口下的端口号//Stop pm2
PMRestart指定指定端口的端口号//Restart pm2
Pm2删除指定端口号//删除当前窗口下的pm2
2pm Start http-server/index . js-PS指定端口号//启动相应的前端和后端。
2.nginx在命令行中的相关说明
Cd /nginx指定目录
catinx . conf//查看nginx文件的内容
Vim nginx.conf //编辑nginix。注意进入后用‘I’编辑模式；u 取消以前的编辑；“Esc”退出编辑模式；Shift:保存并退出
至此，按照上面的步骤，就可以进行任何类型的socket相关的开发了。去试试吧，记得给有问题的朋友留言_
关于vue node socketio如何实现多人互动，发布全在线流程的文章到此结束。更多关于vue socketio如何实现多人互动的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。