前言
首先来了解一下什么是socketio：
使用流行的Web应用程序堆栈（如LAMP（PHP））编写聊天应用程序通常非常困难 。它涉及轮询服务器以查找更改 ，跟踪时间戳 ，并且它比应有的速度慢得多 。
传统上 ，套接字是构建大多数实时聊天系统的解决方案 ，在客户端和服务器之间提供双向通信通道 。
这意味着服务器可以将消息推送到客户端 。每当您编写聊天消息时 ，其想法是服务器将获取它并将其推送到所有其他连接的客户端 。
简单的来说就是一般的逻辑就是服务器响应客户端 ，而socketio基于webstorm实现了服务端推送到其他的客户端 ，不再处于被动的局面 。
服务端
新建好文件夹 ，打开终端输入：
npm init -y
初始好包之后下载好express ，在官网有传统的http ，这里以express来演示：
npm i express@4.18.1
下载好socketio
npm i socket.io@4.5.1
编写好相应的代码：
const app = require(express)()
const server = require(http).Server(app)
const io = require(socket.io)(server, { cors: true })
app.all(*, function (req, res, next) {
res.header(Access-Control-Allow-Origin, *)
res.header(Access-Control-Allow-Headers, Origin,X-Requested-With,Accept,Content-type)
res.header(Access-Control-Allow-Credentials, true)
res.header(Access-Control-Allow-Methods, PUT,POST,GET,DELETE,OPTIONS)
res.header(Content-Type, application/json;charset=utf-8)
if (req.method.toLowerCase() == options) res.sendStatus(200)
else next()
})
server.listen(3030, () => {
console.log(listening on http://localhost:3030)
})
这里写了一些跨域的配置 ，监听的端口号为3030 ，接着在下面书写下列代码：
io.on(connect, (socket) => {
console.log(有人连接成功了)
socket.on(my other event, function (data) {
console.log(data)
socket.emit(news, data)
})
socket.emit(open, {data:恭喜你收到了信息})
// 监听客户端断开
socket.on(disconnect, () => {
console.log(客户端断开)
})
})
connect监听是否有人连接 ，如果客户端有人连接了就会触发回调 ，socket就会收到一些所需的事件触发
客户端
在vue2.x里面我们同样要下载包：
npm i socket.io-client@3.1.0 vue-socket.io@3.0.10
在入口文件里面引入：
// socket.io
import VueSocketIO from vue-socket.io
import SocketIO from socket.io-client
Vue.use(
new VueSocketIO({
debug: false,
connection: SocketIO(http://127.0.0.1:3030, {
autoConnect: false // 取消自动连接
}),
extraHeaders: { Access-Control-Allow-Origin: * }
})
)
这里的配置项有很多 ，可以去官网更好的了解 ，这里传入的网址也就是我们监听的端口
在一个干净的页面书写demo：
<template>
<div class="wrap">
<button @click="connected">连接Socket</button>
<button @click="socketSendmsg">发送数据</button>
</div>
</template>
<script>
export default {
methods: {
connected() {
this.$socket.open() // 开始连接socket
},
socketSendmsg() {
this.$socket.emit(my other event, { my: data })
}
},
sockets: {
connecting() {
console.log(正在连接)
},
disconnect() {
console.log(Socket 断开)
},
connect_failed() {
console.log(连接失败)
},
connect() {
console.log(socket connected)
},
news(data) {
console.log(data)
},
open(data) {
console.log(data)
}
}
}
</script>
使用介绍及流程
使用：node app.js启动服务端 ，npm run serve启动客户端
页面会出现两个按钮 ，按下第一个就会开始连接 ，这时候服务器就会打印有人连接了 ，点击发送消息就会触发this.$socket.emit(my other event, { my: data })第一个参数就是需要响应服务端的名称 ，第二个就是我们传递的数据 ，这时候服务端收到数据就会打印在终端：
socket.on(my other event, function (data) {
console.log(data)
socket.emit(news, data)
})
这时候服务端触发 socket.emit(news, data)第一个参数就是给到客户端的名称 ，第二个就是上一个函数收到的结果 ，这里是原封不动返回出去 ，到了客户端里面再sockets这个对象里面就可以写上new的函数来接收 ，参数就是服务器给我们的数据 ，这里直接打印在控制台 。
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
