vue+node+socket io实现多人互动并发布上线全流程

一、背景

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

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

2. 后端使用node + express + socketio

1.搭建node开发环境

npm init -y

安装所需依赖

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

二、 socket.io相关用法概览

1. 发送事件

socket.emit('事件名', data => {
	// data为要传输的数据,可以为boolean, string, number, object等
})

2. 监听事件

socket.on('发送时的事件名', data => {
	// data发送事件传过来的数据
})

3. 广播事件

// 发送给其他用户 (不对本身发送)
socket.broadcast.emit('事件名',  data => {
	// data为要传输的数据,可以为boolean, string, number, object等
})

三、开发流程

1. 前端新建一个socket.js文件, 用于接收socket相关事件,具体如下

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

// 创建链接
const socket = io()

// 监听
socket.on('connect', () => {
  console.log('和服务器连接成功!!')
})

> =============中间部分用于监听后端发送的socket事件,例如:=====================
// 进入房间
socket.on('enter_room', (data) => {
  // 必要数据可存storage
  localStorage.setItem('counts', JSON.stringify(data))
  store.commit('setData', JSON.parse(localStorage.getItem('data')))
})

// 处理服务失去连接
socket.on('disconnect', () => {
  console.log('disconnect')
})

2. 后端部分相关代码

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 => {
	// 用户进入游戏
	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]
			})
		}

		// 当前人数
		let clientsCount = io.sockets.server.engine.clientsCount

		// 发送用户列表给当前用户(对应前端监听enter_room部分代码)
		io.emit('enter_room', {
			role: data.role,
			users,
			onlineCounts
		})
		// 发送新进用户给其他用户 (不对本身发送)
		socket.broadcast.emit('user_enter', data.name)
	})
})

// 后端开启监听端口, 前端通过配置proxyTable处代理到后端服务器,即可进行前后端数据对接
http.listen(port, () => {
	console.log('后端服务器启动成功!!!')
})

四、发布上线

1.前端:

1)安装http-server,然后链接服务器,进入服务器后拉取远程仓库的前端代码(一般在服务器www目录下拉取),如果没有克隆过代码,需要在服务器配置公钥,才能进行下载

公钥配置

ssh-keygen -t rsa -C "你的邮箱"

生成公钥后,进入公钥生成的文件目录,复制到代码托管平台,添加公钥后就可以克隆代码咯

2)打包前端代码,生成dist文件

npm run build

3)进入dist,执行命令,即可启动前端

pm2 start http-server -- -p 指定端口号

4)前端访问,服务器地址+端口号

2.后端:

1)和前端一样(不用安装http-server),进入服务器后拉取远程仓库的前端代码(一般在服务器www目录下拉取),如果没有克隆过代码,需要在服务器配置公钥,才能进行下载
2)执行命令

pm2 start index.js(文件入口,如果你的是app.js为文件入口,就执行app.js) -- -p 指定端口号

注意点:

socket.io在发布线上的时候前端得修改socket.io代理地址端口为后端端口,否则会报404,修改位置如下(这里我的后端端口为3000)

2. nginx需要修改socket.io的代理转发地址,否则也会报404

补充 1.pm2 常用指令

pm2 list // 查看pm2启动列表
pm2 stop 指定端口号 // 停止当前端口下的pm2
pm2 restart 指定端口号 // 重启指定端口的pm2
pm2 delete 指定端口号 // 删除当前窗口下的pm2
pm2 start http-server / index.js -- -p  指定端口号 // 启动对应的前后端

2. nginx在命令行中的相关指令

cd /nginx指定目录
cat nginx.conf // 查看nginx文件内容
vim nginx.conf // 编辑nginix,注意进入后使用 "i"进行编辑模式;"u"撤销上一步编辑;"esc"退出编辑模式;"shift + :"保存并退出

至此,按照上述步骤,就可以进行socket相关的任何类型开发拉,快去试试吧,有问题的小伙伴记得留言哦_

到此这篇关于vue+node+socketio实现多人互动并发布上线全流程的文章就介绍到这了,更多相关vue socketio实现多人互动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-socket.io跨域问题有效解决方法

    网友问题: 使用了vue-cli这个脚手架工具.在开发环境中如何配置跨域这个我懂.但是使用npm run build后,里面所有的ajax的跨域请求url都变成了根目录. 这样该如何解决部署的跨域问题? 报错信息: Access to XMLHttpRequest at 'http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling&t=N0oqNsW' from origin 'http://localhost:8080' h

  • Vue.js如何使用Socket.IO的示例代码

    在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转).订单语言提醒等,这些都是建立在两端实时通信的基础上的.对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能. 1.什么是 Socket.IO? Socket.IO 是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信.它包括:Node.js服务器库.浏览器的Javascript客户端库.它会

  • vue-socket.io接收不到数据问题的解决方法

    最近公司的一个vue项目用到了vue-socket.io来处理socket数据传输,之前用过socket.io-client,现在知道vue-socket.io是基于socket.io-client的一层封装,将socket挂于全局从而更方便的书写. 于是把代码拉取下来运行: 什么鬼,同样的代码为什么我的就接收不到数据,自己新建一个测试一下吧! 先用express和socket.io搭个小socket服务器: let express = require('express'); let app =

  • socket io与vue-cli的结合使用的示例代码

    关于在vue中使用websocket的简易例子 使用vue-cli生成一个vue模版 安装三个依赖: npm install -s socket.io npm install -s vue-socket.io npm install -s socket.io-client 创建一个新的servers:在文件最外层创建 server/app.js文件: var sever=require('http').createServer(); var io=require('socket.io')(sev

  • Vue与Node.js通过socket.io通信的示例代码

    一.Node中socket.io基础 1.是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮询 JSONP轮询 Forever Iframe 在通信时,客户端与服务器端可以使用相同的API 2.怎么用 原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require('http') var s

  • vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • vue+node+socket io实现多人互动并发布上线全流程

    一.背景 1. 前端使用vue + vuex + socket.io-client npm install socket.io-client --save-dev 2. 后端使用node + express + socketio 1.搭建node开发环境 npm init -y 安装所需依赖 npm install express --save-dev npm install socket.io-client --save-dev 二. socket.io相关用法概览 1. 发送事件 socke

  • 基于Nodejs利用socket.io实现多人聊天室

    socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs

  • node.js利用socket.io实现多人在线匹配联机五子棋

    项目地址,已上传github --> client端使用简单的h5+js实现了棋局的总体布局. server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成. 五子棋ui界面请见.. client端的界面这里就不做过多解释了,只要稍微懂点h5就可以自行去这里 下载源代码观看,因为今天的主题主要是socket.io这一块,所以本章只概述client和server是如何通过tcp连接进行交互的. 首先先带大家看一下目录结构 | server.j

  • vue.js项目打包上线全流程

    目录 vue.js项目打包上线 这里我简单的列出这个过程 vue.js打包之后遇到的坑 打包之后没有被渲染出来 路由(router)mode:'history',导致页面不能渲染问题 vue.js项目打包上线 最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态

  • 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

    一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,

  • nodejs+socket.io实现p2p消息实时发送的项目实践

    目录 常见的消息通知: 实现思路与步骤等 其他方法介绍 技术实现与相关包介绍 包介绍 技术实现 服务端 客户端 常见的消息通知: 常见的站内通知类别(括号里是对自己目前项目出现情况的分析,读者忽略): 公告 Announcement (通道加入新的组织.某组织或用户新上传了某数据摘要.系统凌晨需要版本更新等事件) 提醒 Remind(用户之间.系统与用户之间) 资源订阅提醒(关注的数据摘要更新了内容.评论等) 资源发布提醒(我发布的数据摘要被评论了,被关注了,被申请交易了) 系统提醒 私信 Ma

  • vue使用 vue-socket.io三种方式及踩坑实例解析

    目录 前言 安装 使用方式一 (官方用法)[全局挂载,不验证] 使用方式二 (组件挂载使用)[可验证] 使用方式三 (全局挂载使用)[可验证] 使用方式推荐 nodejs服务端本地demo代码 总结 前言 vue项目实时通信实现常用方式: 一.原生HTML5 WebSocket实现,vue中使用websocket 二.插件socket.io官网 ,Socket.io是一个WebSocket库,包括了客户端js和服务器端的nodejs,会自动根据浏览器从WebSocket.AJAX长轮询.Ifra

  • vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    项目简介 主要是通过做一个多人在线多房间群聊的小项目.来练手全栈技术的结合运用. 项目源码:chat-vue-node 主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置: 需安装配置好 node,mongodb环境(参考:http://www.jb51.net/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据. 编译运行: 1.开启MongoDB服务,新建命令行

  • node.js + socket.io 实现点对点随机匹配聊天

    真心佩服那些可以经常发布笔记的人,其实我也想经常发来的,奈何技术不够加上懒,要向大神们多多学习了,前段时间有用bomb平台自带的socket写一个聊天室,其实基本就是改了改它的demo,这次想实现一个随机私聊,所以自己基于node 和 socket.io 来搭服务,当然,第一次用node做东西玩,虽然做的不好,但是也蛮分享下哈. 先说说用到的东西, node 用来做后台服务,express 用来托管静态资源,然后socket.io 用来传送聊天数据.接下来说说思路,其实用socket.io来传数

随机推荐