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
————————————————
版权声明:本文为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