react + socket.io 创建简易聊天室
本文介绍用 socket.io + React开发的一个简易聊天室。
适合socket.io 入门学习。
功能点:
实现效果如下图所演示:三个用户分别进入聊天室,聊天室即时通讯,最后分别离开聊天室。
- 计算在线用户
- 用户登录加入后进入聊天室,通知其他在线用户新成员的加入
- 用户发送消息,信息列表展示信息,其他成员即时更新信息
- 用户离开,通知其他在线用户
如何实现
基本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。