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

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

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

加入express依赖和socket.io依赖

npm install express socket.io

这是我使用的依赖版本

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

工程目录如图:

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

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 依赖就够了

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

我们在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文件中配置代理,注意,第二个代理路劲的wa属性必须设置为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() {
    socket.on('message',(data) =>{
      console.log(data)
    });
  }
}
</script>

样式部分我就没定义了

 

 

第三步 测试

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

node src/socket/socket.js

启动客户端vue

npm run dev

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

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

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

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

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

 

上一篇:python实时生成rsa公密匙对,前端获取公匙加密信息


下一篇:用React, Flask和SocketIO搭建在线聊天室(八)