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 搭建數據可視化平臺