装包：

yarn add socket.io

 node后台：

const express = require('express')
const http = require('http')
const socket = require('socket.io')
const { getUserInfoByToken } = require('../../utils/light/tools')

let app = express()
const server = http.createServer(app)
const io = socket(server, {
  cors: {
    origin: [
      'http://localhost:3000',
      'https://xutongbao.top',
      'https://chat.xutongbao.top',
    ],
  },
})

io.on('connection', async (socket) => {
  console.log('已连接', socket.id)

  //测试
  socket.on('/socket/test', async (data) => {
    console.log('data', data)
    io.sockets.emit('/socket/test', data)
    const ids = await io.allSockets()
    console.log(ids)
  })

  //登录
  socket.on('/socket/login', async (req) => {
    const ids = await io.allSockets()
    let user = await getUserInfoByToken(req.headers.authorization)
    global.onlineUsers.push({
      socketId: socket.id,
      userId: user.uid,
      nickname: user.nickname,
    })
    global.onlineUsers = global.onlineUsers
      .filter((item) => [...ids].includes(item.socketId))
      .filter((item) => item.userId)
    console.log(global.onlineUsers)
    console.log('在线人数', global.onlineUsers.length)
    io.sockets.emit('/socket/login', req)
  })
})

server.listen(84, (res) => {
  console.log('socket', 84, res)
})

module.exports = {
  io,
}

前端装包：

yarn add socket.io-client

前端代码：

import { io } from 'socket.io-client'
import { socketBaseURL } from '../utils/config'

const socket = io(`${socketBaseURL}`)

function onConnect() {
  console.log('登录，已连接', socket.id)
}
socket.on('connect', onConnect)

socket.on('/socket/login', (res) => {
  console.log(res)
})

const handleLogin = () => {
  let config = {
    headers: {},
  }
  if (config.isNotNeedToken !== true) {
    config.headers.authorization = localStorage.getItem('token')
  }
  if (window.platform === 'rn') {
    config.headers.platformos = localStorage.getItem('platformos')
      ? localStorage.getItem('platformos')
      : 'rn'
    config.headers.version = localStorage.getItem('appVersion')
      ? localStorage.getItem('appVersion')
      : ''
  } else {
    config.headers.platformos = 'h5'
    config.headers.version = window.version
  }
  config.headers.href = `${document.location.href}?platformos=${config.headers.platformos}&version=${config.headers.version}`

  socket.emit('/socket/login', {
    ...config,
    code: 200,
    data: {},
    message: '成功',
    time: Date.now(),
  })
}

export { socket, handleLogin }

 

const socketBaseURL = {
  // 使用反向代理解决跨域时，dev应为空字符串
  //dev: '',
  dev: 'http://172.20.10.4:84', //192.168.0.137 localhost 192.168.1.107 172.20.10.4:84
  //dev: 'http://yuying-api.xutongbao.top',
  test: '',
  //prod: 'http://yuying-api.xutongbao.top',
  prod: '' //使用nginx代理解决https请求转发到http
}[process.env.REACT_APP_MODE]


export { socketBaseURL }

 nginx配置：

    server {
        listen       443 ssl; 
        server_name  chat.xutongbao.top;
        ssl_certificate         /temp/ssl/chat.xutongbao.top/chat.xutongbao.top.crt;   # nginx的ssl证书文件
        ssl_certificate_key     /temp/ssl/chat.xutongbao.top/chat.xutongbao.top.key;  # nginx的ssl证书验证密码

        #配置根目录
        location / {
            root    /temp/yuying;
            index  index.html index.htm;
            add_header Content-Security-Policy upgrade-insecure-requests;

        }

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass http://yuying-api.xutongbao.top;
        }

        location /socket.io/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass http://127.0.0.1:84;

            # 关键配置 start
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            # 关键配置 end
        }

        # 匹配sslCnd开头的请求，实际转发的请求去掉多余的sslCnd这三个字母
        location ^~/sslCnd/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass http://cdn.xutongbao.top/;
        }           
    }  

 

nginx配置错误会报错：