前言
首先来了解一下什么是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'的函数来接收，参数就是服务器给我们的数据，这里直接打印在控制台。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持阿兔在线工具。
