最近准备用react搭建node搭建一个大数据可视化平台,并且服务端利用到socket.io,客户端利用到socket.io-client
这里总结下基本使用方式:
安装:
npm i express socket.io socket.io-client -S
服务端:
let express = require('express') // 引入express中间件
let app = express()
let http = require('http').Server(app) // 引入socket.io
let io = require('socket.io')(http)
app.get('/', (req, res) => res.send('Hello')) // 初始化进入
app.use('/user', require('./router/user')) // 引入user路由
// 开启socket
io.on('connect', socket => {
socket.emit('open', '初始化连接') // 指定open标识
// 当客户端关闭时,向所有正在连接的客户端广播
socket.on('disconnect', () => {
socket.broadcast.emit('关闭')
})
})
let server = http.listen(8888, '127.0.0.1', () => {
let host = server.address().address
let port = server.address().port
console.log(`Server running at http://${host}:${port}`)
})
控制台运行,我们看到代码已经成功运行了
我们访问 http://127.0.0.1:8888,可以看到服务端成功启动了
接下来,客户端利用socket.io-client与服务端初始化连接
客户端:
import React, {Component} from 'react';
let socket = require('socket.io-client')('http://127.0.0.1:8888') // 指定连接地址
export default class App extends Component {
constructor() {
super()
}
componentDidMount() {
// 指定服务端的标识open 客户端利用on事件监听
socket.on('open', data => {
console.log(data)
})
}
}
我们打印data 看到客户端已经收到服务端的推送了
基本使用就介绍到这里,后期准备利用socket.io搭建大屏可视化平台以及聊天室等等。。