vue项目初准备
- 使用vue-cli 新建项目（这里命名为 backstage-app）
- 【注意】新建的项目，没有用webpack相关的东西
- 这里使用到了依赖如下（图1）
- vue-router 路由，非必须
- element-ui 界面组件，非必须
- 安装依赖指令格式举例：yarn add vue-socket.io -S
- Routers、SocketIO、StaticResource文件夹都是后期添加的，可忽略
- vue.config.js 后期添加的，设置代理使用，后面会讲到
图1 - vue项目相关依赖
进入项目目录backstage-app，在文件夹路径输入cmd，回车，打开当前目录控制台
使用指令yarn serve 启动vue，使用浏览器预览，保证项目能够正常运行
ctlr + c 关闭项目，开始搭建与Socket IO服务器连接
实际操作
- 新建vue.config.js文件，设定代理，文件位置查看（图1 - vue项目相关依赖）
- 192.168.1.109 是本地ip地址
- proxy的作用将/socket.io/请求转到http://192.168.1.109:8050/socket.io
- https: true为启用https
- '/socket.io/' 当前浏览地址在请求服务器地址的时候，转为'http://192.168.1.109:8050/socket.io'
module.exports = {
devServer: {
host: '192.168.1.109',
port: 8080,
https: true,
proxy: {
'/socket.io/': {
target: 'http://192.168.1.109:8050/socket.io',
//是否代理websockets
ws: true,
// 设置同源 默认false，是否需要改变原始主机头为目标URL
changeOrigin: true,
pathRewrite: {
'^/socket.io': ''
}
}
}
}
}
- 新建SocketIOConfig.js（也可以不用新建，可以直接将代码写在main.js中），编写内容如下
- autoConnect：不自动连接
import VueSocketIO from 'vue-socket.io'
let SocketIOConfig = new VueSocketIO({
debug: false,
// SocketIO 服务器端地址，这里直接使用/代表使用当前地址
connection: '/',
vuex: {},
options: {
autoConnect: false
}
})
export default SocketIOConfig
- vue路由构建，非必须，这里不做叙述，可以查看vue-router的官网学习
- element-ui 界面组件构建，非必须，这里不做叙述，可以查看element-ui的官网学习
- 打开main.js，修改及添加内容如下
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// element ui组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// vue-router 路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import RouterConfig from './Routers/RouterConfig.js'
// socket.io 服务
import SocketIOConfig from './SocketIO/SocketIOConfig.js'
Vue.use(SocketIOConfig)
// 自定义，google 浏览器 console.log 颜色提示封装，使用this.$lib.logInfo('msg')
import TagResource from './StaticResource/TagResource.js'
import CommonLib from './StaticResource/CommonLib.js'
Vue.prototype.$lib = CommonLib;
Vue.prototype.$Tag = TagResource;
new Vue({
router: RouterConfig,
render: h => h(App),
}).$mount('#app')
-
使用yarn serve运行项目（图2）
图2 - 运行项目 修改主界面代码如下
- 【注意】使用this.$socket.on无效，未查询到原因
<style>
video {
max-width: 100%;
width: 320px;
border: 1px solid;
}
</style>
<template>
<el-row>
<el-col :span="12">
<h1>本地视频流</h1>
<video ref="localVideo" autoplay muted playsinline></video>
</el-col>
<el-col :span="12">
<h1>远程视频流</h1>
<video ref="remoteVideo" autoplay playsinline></video>
</el-col>
<el-col :span="24">
<el-button @click="test">发送消息</el-button>
</el-col>
</el-row>
</template>
<script>
export default {
mounted() {
// Socket IO 存在 && 未连接到服务器
if (this.$socket != null && !this.$socket.connected) {
this.$socket.connect();
}
},
methods: {
test() {
this.$socket.emit('message', 'test-val')
}
},
sockets: {
connect() {
this.$lib.logInfo("连接socket io服务器成功");
},
message(msg) {
this.$lib.logInfo("接收到服务端的消息：" + msg);
}
},
}
</script>
- 修改后运行再次查看浏览器的页面效果（图3）
yarn serve控制台提示代理错误，可以忽视，不影响本地使用
-
刚刚进入界面：
- Socket IO服务器提示：有新用户接入，socket id：fT7UW2DSY9shc1HEAAAB
- Google浏览器的控制台：【info】- 连接socket io服务器成功
-
点击发送信息按钮（发送的信息内容：test-val）
- Socket IO服务器提示：推送 -> 接收到客户端发送信息的请求，消息内容： test-val
- Google浏览器的控制台：【info】- 接收到服务端的消息：test-val
图3 - 运行结果
- vue项目与Socket IO 服务器通信完成
