Node.js 搭配 Socket.io 实现与客户端实时通信

最近准备用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搭建大屏可视化平台以及聊天室等等。。

相关文章

• Node.js + express + react + echarts 从 0 搭建数据可视化平台