用node、socket+react实现聊天室功能

node

npm i socket.io

// import path from 'path'
// import { createServer } from 'http'
// import { Server } from 'socket.io'

const { createServer } = require('http')
const { Server } = require('socket.io')

const httpServer = createServer()

var io = new Server(httpServer, {
    path: '/websocket',
    cors: {
        origin: ['http://localhost:3000'],
        allowedHeaders: ['y-hearder'],
        credentials: true
    }
})

let clients = 0

io.on('connection', function (socket) {
    clients++

    socket.on('chat:start', (id, cb) => {
        console.log(`chat:start::${id}上线成功`);
        io.sockets.emit('chat:add', {
            [id]: `用户${id}已经上线`
        })
        cb()
    })

    socket.on('chat:msg', (id, msg) => {
        console.log(`${id}说：${msg}`);
        io.sockets.emit('chat:msg', {
            id,
            type: 'msg',
            msg: `${msg}`
        })
    })
})

httpServer.listen(808, () => {
    console.log('server running in 808');
})

如果想用import，可以用rollup将其转换一下

npm i rollup @rollup/plugin-babel

在根文件新建一个rollup.config.js

const babel = require('@rollup/plugin-babel')

module.exports = {
    input: './server/index.js',
    output: {
        file: './dist/socket/bundle.js',
        format: 'umd'
    },
    treeshake: false,
    plugins: [
        babel({
            extensions: ['.js','.ts'],
            exclude: 'node_modules/**'
        })
    ]
}

但是转换代码后，你需要运行output的./dist/socket/bundle.js文件，而不是使用node运行原来的文件了。

ps：想要文件实时转换的话，可以在package.json里新增个命令，比如

"scripts": {
    "dev": "rollup -c -w"
},

这样rollup就会实时转换代码到你output的地方

跑命令可以用nodemon，这样就会都是实时更改服务的了

react

import React, { useState, useEffect } from "react";
import { io } from "socket.io-client";

let socket, id;

export default function Question() {
  const [chat, setChat] = useState("");
  const [chatList, setChatList] = useState([]);

  function handleChatChange(e) {
    const value = e.target.value;
    setChat(value);
  }

  function handleSendMsg() {
    socket.emit("chat:msg", id, chat);
    setChat("");
  }

  useEffect(() => {
    id = `id_${parseInt(Math.random() * 1000)}`;
    socket = io("ws://localhost:808", {
      path: "/websocket",
      reconnectionDelayMax: 10000,
      query: {
        "my-key": "my-value",
      },
    });

    socket.on("connect", function (res) {
      socket.emit("chat:start", id, function () {
        console.log("链接成功");
      });
    });

    // 有新人加入时
    socket.on("chat:add", (data) => {
      // 如果不等于我自己，才处理
      data && (data[id] || console.log(`上线通知：${JSON.stringify(data)}`));
    });

    // socket.emit("chat:msg", id, `hello this is ${id}`);

    socket.on("chat:msg", (data) => {
      setChatList((chatList) => [...chatList, data]);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  return (
    <div className="flex flex-col w-96 p-2 bg-gray-100 items-center">
      <h2 className="my-2">聊天室</h2>
      <div className="w-full border-solid border border-gray-300 rounded-md p-2 h-96">
        {chatList.map((item, idx) => (
          <div
            className={
              item.id === id
                ? "bg-gray-600 flex justify-end"
                : "bg-white flex justify-start"
            }
            key={idx + item.msg}
          >
            <span>{item.msg}</span>
          </div>
        ))}
      </div>
      <div className="w-full mt-2 flex justify-start">
        <input
          onChange={handleChatChange}
          value={chat}
          className="w-52 border-solid border border-gray-300 rounded-md p-2"
          type="text"
        />
        <button
          onClick={handleSendMsg}
          className="w-20 ml-2 bg-blue-600 rounded-md text-white flex justify-center items-center"
        >
          发送
        </button>
      </div>
    </div>
  );
}

页面的样子