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

2022-07-14 16:05:38 阅读：320 来源： 互联网

标签：vue http 跨域 SocketIO 24000 io 客户端 data socket

第一步创建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
————————————————
版权声明：本文为CSDN博主「Xeon_CC」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Xeon_CC/article/details/114022145

标签：vue,http,跨域,SocketIO,24000,io,客户端,data,socket
来源： https://www.cnblogs.com/xiaosheng1989/p/16478010.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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