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

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

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

加入express依赖和socket.io依赖

npm install express socket.io

这是我使用的依赖版本

工程目录如图：

socket.js代码

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);

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

io.on('connection',(socket) => {
    console.log('user connected');
    socket.on('hello',(data) => {
        console.log(`收到客户端的消息：${data}`);
    })
});


app.get('/',(request, response) => {
    /*在浏览器发送 http://127.0.0.1:24000 的请求，客户端定义了监听'message'的socket，所以可以接收消息，即使客户端有代码 
        io.on('message',(data) => {
            console.log(data);
        });
    */
    io.emit('message','服务端向客户端推送消息...');
    response.writeHead(200, {"Content-type": "text/plain"});
    response.end();
});


server.listen(24000,() => {
    console.log("server is up and running on port 24000");
});

谷歌度娘，十有八九都是说配置前端的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 依赖就够了

我们在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部分，连接到服务器，并且编写一个发送输入的消息给服务器的程序

<script>
import io from 'socket.io-client';
const socket = io('http://127.0.0.1:24000');
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    /*socket.emit('hello','xxx') 表示，服务端上定义了一个监听'hello'的socket，
      即服务端有代码 
      socket.on('hello',(data) => {
        //这是接收到的客户端消息
        console.log(data);
      })
       */
    sendMsgToServer(){
      socket.emit('hello',document.getElementById("inputArea").value);
    }
  },
  created() {
    //一定要移除旧的message监听，否则会出现重复监听的状况
    socket.removeListener('message');
    //这是移除所有监听
    // socket.removeAllListeners();
    socket.on('message',(data) =>{
      console.log(data)
    });
  }
}
</script>

样式部分我就没定义了

 

 

第三步 测试

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

node src/socket/socket.js

启动客户端vue

npm run dev

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

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

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