vue中SocketIO的正确使用方法,并且解决跨域问题
第一步 创建nodeJS的http服务器,作为socket服务端
新建文件夹,命名为NodejsScoketDemo,然后使用终端,npm init ,一路回车即可
加入express依赖和socket.io依赖
npm install express socket.io
这是我使用的依赖版本
工程目录如图:
socket.js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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文件的代理,结果都是无效的,仍然报跨域被阻止的错误,其实关键不是说这个代理不用设置,要设置。关键在
(下边这块代码仅用来说明展示,上面已经有了,不用再重复写了)
1 2 3 4 5 | const io = socketIO(server,{ cors: { origin: '*' } }); |
那么这时候,我们就可以直接使用命令启动socket.js ,开启http服务器,并且监听24000端口
1 | node src/socket/socket.js |
第二步 创建vue-cli脚手架,作为socket客户端
1 | npm init webpack vuesocketdemo |
引入依赖
1 | npm install vue-socket.io socket.io-client |
这些是我引入的依赖版本,理论上,只引入socket.io-client 依赖就够了
我们在main.js导入依赖,并且使用它,SocketIO里面填写ws://IP:监听的服务器端口
1 2 3 4 5 6 7 | 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,否则还会报跨域被阻止的错误
1 2 3 4 5 6 7 8 9 10 11 12 | 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部分,编写一个按钮和输入框,用来发送消息给服务器
1 2 3 4 5 6 | <template> <div class = "hello" > <input id= "inputArea" type= "text" > <button @click= "sendMsgToServer" >发送消息给服务端</button> </div> </template> |
在javascript部分,连接到服务器,并且编写一个发送输入的消息给服务器的程序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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端口
1 | node src/socket/socket.js |
启动客户端vue
1 | 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
本文来自博客园,作者:王晓升,转载请注明原文链接:https://www.cnblogs.com/xiaosheng1989/p/16478010.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战