react + socket.io 创建简易聊天室

本文介绍用 socket.io + React开发的一个简易聊天室。
适合socket.io 入门学习。

功能点:

实现效果如下图所演示:三个用户分别进入聊天室,聊天室即时通讯,最后分别离开聊天室。

react-simple-chat

  1. 计算在线用户
  2. 用户登录加入后进入聊天室,通知其他在线用户新成员的加入
  3. 用户发送消息,信息列表展示信息,其他成员即时更新信息
  4. 用户离开,通知其他在线用户

如何实现

基本api

Server API

# 创建服务器
const io = require('socket.io')(); 
const port = 8000;
io.listen(port);

// 用户连接服务器
io.on('connection', (socket) => {})    

// 注册监听事件
socket.on('eventName', cb)

// 发射(触发)监听事件
socket.emit('eventName', data) // 向建立该连接的客户端广播
socket.broadcast.emit('eventName', data) // 广播消息给除当前客户端之外的所有在线客户端
io.sockets.emit('eventName', data) //向所有客户端广播,等同于上面两个的和

Client API

# 连接服务器
import io from "socket.io-client";
const socket = io('http://localhost:8000');

# 监听事件
socket.on('eventName', cb);
# 发射事件
socket.emit('eventName', data);

项目结构

# 脚手架搭建项目框架
create-react-app react-simple-chat
# 安装 socket.io socket.io-client
yarn add socket.io socket.io-client -S

# 项目目录
├── public
├── server    #  服务端代码
│         └── index.js 
└── src        #  客户端代码
    ├── App.js    # 界面UI代码
    ├── api.js    # 通讯代码
    ├── index.js
    ├── registerServiceWorker.js
    └── styles

服务端

// server/index.js
const io = require('socket.io')();
// 统计用户总数
let numUsers = 0

io.on('connection', (socket) => {
    let logined = false;        // 用户登录标识

    socket.on('user:join', (username) => {
        logined = true
        socket.username = username
        ++numUsers
        // 告知用户:有新用户加入
        socket.emit('user:joined', {
            numUsers
        })
        socket.broadcast.emit('user:add', {
            username,
            numUsers
        })
    })

    socket.on('message:send', (data) => {
        socket.broadcast.emit('message:receive', {
            username: socket.username,
            message: data.message
        });
    })

    socket.on('disconnect', () => {
        if (logined) {
            --numUsers;
            // 告知用户: 有用户离开
            socket.broadcast.emit('user:left', {
                username: socket.username,
                numUsers: numUsers
            });
        }
    });
});


const port = 8000;
io.listen(port);
console.log('listening on port ', port);

客户端

// src/api.js
import io from "socket.io-client";
const socket = io('http://localhost:8000');

const login = (username) => {
  socket.emit('user:join', username)
}

const onLogin = (cb) => {
    socket.on('user:add', cb);
}

const onJoin = (cb) => {
    socket.on('user:joined', cb);    
}

const send = (data) => {
  socket.emit('message:send', data);
}

const onMessage = (cb) => {
  socket.on('message:receive', cb);
}

const onLeft = (cb) => {
  socket.on('user:left', cb);
}

export {
    login,
    onLogin,
    onJoin,
    send,
    onMessage,
    onLeft
};

本文只展示通讯部分code,如果想围观整个项目的源码,献上 GitHub地址,欢迎star。

文章作者: phoebe
文章链接: https://phoebecodespace.github.io/2018/06/30/create-react-chat-app/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 phoebe's blog