) {
27 | this.setState({ message: e.target.value });
28 | }
29 |
30 | // 点击提交或按回车
31 |
32 | public handleClick(e: MouseEvent) {
33 | e.preventDefault();
34 | this.sendMessage();
35 | }
36 |
37 | public handleKeyPress(e: KeyboardEvent): boolean {
38 | if (e.key === 'Enter') {
39 | this.sendMessage();
40 | }
41 | return false;
42 | }
43 |
44 | // 发送聊天信息
45 | public sendMessage(): boolean {
46 | const message = this.state.message;
47 | const socket = this.state.socket;
48 | if (message) {
49 | const obj = {
50 | uid: this.state.myId,
51 | username: this.state.myName,
52 | message: message
53 | };
54 | socket.emit('message', obj);
55 | this.setState({ message: '' });
56 | }
57 | return false;
58 | }
59 | public render(): JSX.Element {
60 | return (
61 |
62 |
63 |
64 |
65 |
66 |
67 |
70 |
71 |
72 |
77 |
78 |
79 |
鱼头的聊天室 | {props.username}
80 |
81 |
82 |
83 |
84 |
85 |
86 | 在线人数: {state.onlineCount}, 在线列表: {renderUserList()}
87 |
88 |
89 |
90 |
91 |
92 |
8 | {props.msgUser} {props.action === 'login' ? '进入了聊天室' : '离开了聊天室'} {props.time}
9 |
10 | );
11 | } else {
12 | return (
13 |
14 |
15 | {props.msgUser} {props.time}
16 |
17 |
{props.action}
18 |
35 | {messages.map((message) => (
36 |
37 | ))}
38 |
39 | );
40 | };
41 |
42 | export default Messages;
43 |
--------------------------------------------------------------------------------
/src/components/RoomStatus.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const RoomStatus = (props) => {
4 | return (
5 |
6 | 在线人数: {props.onlineCount}, 在线列表: {props.userhtml}
7 |
8 | );
9 | };
10 | export default RoomStatus;
11 |
--------------------------------------------------------------------------------
/src/container/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react';
2 | import ChatRoom from '../components/ChatRoom';
3 | import '../style/index.scss';
4 | import { Context } from '../context/index';
5 |
6 | const userState = (username) => {
7 | const [user, setUsername] = useState(username);
8 | return [user, setUsername];
9 | };
10 |
11 | const generateUid = () => {
12 | return String(new Date().getTime()) + Math.floor(Math.random() * 999 + 1);
13 | };
14 |
15 | const App = (props) => {
16 | // 获取context中的数据
17 | const { state, dispatch } = useContext(Context);
18 | // 输入输出用户名
19 | const [user, setUsername] = userState(null);
20 | const handleLogin = () => {
21 | const uid = generateUid();
22 | const username = user ? user : `游客${uid}`;
23 | dispatch({ type: 'login', payload: { uid, username } });
24 | state.socket.emit('login', { uid, username });
25 | };
26 | const handleKeyPress = (e) => {
27 | if (e.key === 'Enter') {
28 | handleLogin();
29 | }
30 | return false;
31 | };
32 | return (
33 |
34 | {state.uid ? (
35 | // 已登录
36 |
37 | ) : (
38 | // 登录界面
39 |
40 |
登 陆
41 |
42 | setUsername(e.target.value)} onKeyPress={handleKeyPress} />
43 |
44 |
45 |
48 |
49 |
50 | )}
51 |