socket.io在vue的基本使用
对于上一篇内容,没有说到socket的基本使用,这篇文章说说socket.io在前端和后端的使用。该项目的技术栈为:前端:vue2 + socket.io后端:express + socket.io。
对于上一篇内容,没有说到socket的基本使用,这篇文章说说socket.io在前端和后端的使用。
项目地址:歪fChat
该项目的技术栈为:
前端:vue2 + socket.io
后端:express + socket.io
下面是具体操作步骤:
一、安装依赖并引入到项目中
前端:
1. 安装依赖
npm i vue-socket.io -S
npm i socket.io-client -S
2. 在main.js中引入
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
const SOCKETIO = new VueSocketIO({
debug: true, // true开启
connection: SocketIO('ws://127.0.0.1:24000'), // 里面写socket服务器地址
// 使用vuex
vuex: {
store,
// 定义vuex函数的时候,用来区分普通函数还是socket函数。
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
options: {
autoConnect: false // 关闭自动连接,一般是在用户登录过后才进行手动连接
}
})
Vue.use(SOCKETIO)
new Vue({
render: h => h(App),
}).$mount('#app')
当debug开启后,控制台会有输出调试内容
注意:
1. connection: SocketIO('ws://127.0.0.1:24000') ws://127.0.0.1:24000这个是后端提供的socket服务器地址
2. autoConnect: false 这是关闭自动连接,当用户登录后才进行手动连接,手动调用连接的方法为:this.$socket.connect() (后面会说到)
后端:
1. 安装依赖
npm i express -S
npm i socket.io -S
2. 引入socket
可以在官网上找到express服务器的使用方法
官网地址:https://socket.io/zh-CN/docs/v4/server-initialization/#with-express
在项目的index.js中引入
const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { /* options */ });
io.on("connection", (socket) => {
// 前端所有的事件都写在这里面
// ...
});
httpServer.listen(24000, () => {
console.log("🛰️ socket_server running at http://127.0.0.1:24000");
});
这是后端的项目目录
使用node index.js启动socket服务器
当后端项目启动后,可以去浏览器控制台查看连接情况,结果是不停的报错,客户端它会不断向服务器进行请求连接
看到XMLHttpRequest和CORS,就知道是跨域了😂,看了网上说的需要在前端的vue.config.js中配置跨域代理,我试了一下是行不通的,依旧会报错,对于http请求跨域,后端也可以配置cors来解决,在socket中,可以通过配置项的方式来解决。
配置下面代码即可解决跨域问题:
const io = new Server(httpServer, {
cors: {
origin: '*'
}
});
当控制台不报红了,就可以开始下面的步骤了
二、使用socket
前端和后端对于socket的使用基本一致,通过socket.emit('事件名', 传递的参数)来触发事件,传递的参数可以是数组或对象(socket底层做了转字符串操作),通过socket.on('事件名', (data) => {})来接收参数。
前端:
1. 手动连接socket
可以通过 this.$socket.connect() 进行连接
我们可以在后端代码打印一下(注:socket会对每一个连接上的用户分配一个唯一的id)
当我打开两个浏览器窗口时,后端就会输出连接上的用户id
2. 后端为每一个连接上的用户派发事件
派发的事件名是自定义的,但不能使用socket内置的,比如connection(连接成功)、disconnect(断开连接)。
注意⚠️:前后端对同一个事件,触发和接收用的事件名必须一致
例:后端为每个连接上的用户派发welcome事件
io.on("connection", (socket) => {
console.log(socket.id, '连接成功');
socket.emit('welcome', `欢迎${socket.id}连接`)
});
注意:vue使用下面方法是监听不到事件的
export default {
mounted() {
this.$socket.connect()
// 错误方法
this.$socket.on('welcome', (data) => {
console.log(data);
})
}
}
而是通过下面的方法来监听
export default {
mounted() {
this.$socket.connect()
},
sockets: {
// 事件名,参数为后端传递的数据
welcome(data) {
console.log(data);
}
}
}
当连接上的用户则会输出下面的内容
前端通过 this.$socket.emit('事件名', 传递的数据)
下面以login事件为例:
mounted() {
this.$socket.connect()
this.$socket.emit('login', '我是前端,我连接上了')
},
io.on("connection", (socket) => {
console.log(socket.id, '连接成功');
socket.emit('welcome', `欢迎${socket.id}连接`)
// 接收login事件
socket.on('login', (data) => {
console.log(data);
})
});
打印下data
根据上面内容,socket的基本使用就这些,想要实现私聊和群聊,可以去看看我的上一篇文章😂
socket实现群聊和私聊https://blog.csdn.net/m0_65519288/article/details/131031942?spm=1001.2014.3001.5501
更多推荐
所有评论(0)