vue中SocketIO的正确使用方法，并且解决跨域问题

喜欢ヅ旅行 2022-11-01 10:58 7阅读 0赞

### 第一步 创建nodeJS的http服务器，作为socket服务端 ###

新建文件夹，命名为NodejsScoketDemo，然后使用终端，npm init ，一路回车即可

加入express依赖和socket.io依赖

npm install express socket.io

这是我使用的依赖版本

![20210224144034993.png][]

工程目录如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70][]

### socket.js代码 ###

**谷歌度娘，十有八九都是说配置前端的config目录下的index.js文件的代理，结果都是无效的，仍然报跨域被阻止的错误，其实关键不是说这个代理不用设置，要设置。关键在**

**（下边这块代码仅用来说明展示，上面已经有了，不用再重复写了）**

const io = socketIO(server,{
        cors: {
            origin: '*'
        }
    });

那么这时候，我们就可以直接使用命令启动socket.js ,开启http服务器，并且监听24000端口

node src/socket/socket.js

## ##

### 第二步 创建vue-cli脚手架，作为socket客户端 ###

npm init webpack vuesocketdemo

引入依赖

npm install vue-socket.io socket.io-client

这些是我引入的依赖版本，理论上，只引入socket.io-client 依赖就够了

![20210224150312451.png][]

我们在main.js导入依赖，并且使用它，SocketIO里面填写ws://IP:监听的服务器端口

import VueSocketIO from 'vue-socket.io'
    import SocketIO from 'socket.io-client'
    
    Vue.use(new VueSocketIO({
      debug: true,
      connection: SocketIO('ws://127.0.0.1:24000')
    }));

接下来，我们在conifg的index.js文件中配置代理，注意，第二个代理路劲的ws属性必须设置为false，否则还会报跨域被阻止的错误

proxyTable: {
      '/socket.io':{
        target: 'http://127.0.0.1:24000/', // target host
        changeOrigin: true, // needed for virtual hosted sites
        logLevel: 'debug'
      },
      '/sockjs-node': {
        target: 'http://127.0.0.1:24000',
        ws: false,
        changeOrigin: true
      }
    }

### 最后，我们在HelloWorld.vue 编写socket代码 ###

在html部分，编写一个按钮和输入框，用来发送消息给服务器

<template>
      <div class="hello">
        <input id="inputArea" type="text">
        <button @click="sendMsgToServer">发送消息给服务端</button>
      </div>
    </template>

在javascript部分，连接到服务器，并且编写一个发送输入的消息给服务器的程序

样式部分我就没定义了

## ##

### 第三步 测试 ###

服务端启动http服务器以监听socket 24000端口

node src/socket/socket.js

启动客户端vue

npm run dev

测试浏览器发送请求给http服务器，委托http服务器把消息推送给客户端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1][]

测试客户端发送消息给服务端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3][]

代码demo下载：链接: https://pan.baidu.com/s/1gIbU8Z6LmWMiuqsB4riF9Q  密码: 97e1

[20210224144034993.png]: /images/20221024/1c81fe67d0cd480e917594a2bd82b684.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]: /images/20221024/d2b03347c4fb45d1bee65613ab3c22dc.png
[20210224150312451.png]: /images/20221024/737f49e297fc410cb578857b76f83cfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]: /images/20221024/122f1bf942d84209a2dfe93ec6a29cd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2]: /images/20221024/f3b47c6abfdd4d3590d8451d28930ef0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3]: /images/20221024/dbb74ee0f4a440449b79e0eaa4e44a1b.png