WebRTC本地实现 - Vue与Socket IO通信项目搭建与测试（https）

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的官网学习

vue-router的官网

element-ui 界面组件构建，非必须，这里不做叙述，可以查看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控制台提示代理错误，可以忽视，不影响本地使用
刚刚进入界面：
1. Socket IO服务器提示：有新用户接入，socket id：fT7UW2DSY9shc1HEAAAB
2. Google浏览器的控制台：【info】- 连接socket io服务器成功
点击发送信息按钮（发送的信息内容：test-val）
1. Socket IO服务器提示：推送 -> 接收到客户端发送信息的请求，消息内容： test-val
2. Google浏览器的控制台：【info】- 接收到服务端的消息：test-val