聊天室：发送表情、图片、文件这节来实现下发送表情、图片、文件。
这种 emoji 表情：
有现成的库 emoji-mart (opens new window)：
可以试试他的 demo (opens new window)：
我们直接用就行：
安装下：
npm install --save @emoji-mart/data @emoji-mart/react
1
<Popover content={<EmojiPicker data={data} onEmojiSelect={(emoji: any) => {
setInputText((inputText) => inputText + emoji.native)
}} />} title="Title" trigger="click">
表情
</Popover>
1
2
3
4
5
2
3
4
5
这样，就可以发表情了：
然后来实现发送图片：
这个和之前的上传图片没啥大的区别。
加一个 Modal：
src/pages/Chat/UploadImageModal.tsx
import { Modal } from "antd";
import { ImageUpload } from "./ImageUpload";
import { useState } from "react";
interface UploadImageModalProps {
isOpen: boolean;
handleClose: (imageSrc?: string) => void
}
export function UploadImageModal(props: UploadImageModalProps) {
const [imgSrc, setImgSrc] = useState<string>('');
return <Modal
title="上传图片"
open={props.isOpen}
onOk={() => {
props.handleClose(imgSrc)
setImgSrc('')
}}
onCancel={() => props.handleClose()}
okText={'确认'}
cancelText={'取消'}
>
<ImageUpload value={imgSrc} onChange={(value: string) => {
setImgSrc(value)
}}/>
</Modal>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Modal 里只包含上传组件，关闭弹窗的时候把 imgSrc 通过参数返回。
这个上传组件和之前的差不多：
src/pages/Chat/ImageUpload.tsx
import { InboxOutlined } from "@ant-design/icons";
import { message } from "antd";
import Dragger, { DraggerProps } from "antd/es/upload/Dragger";
import axios from "axios";
import { presignedUrl } from "../../interfaces";
interface ImageUploadProps {
value?: string;
onChange?: Function
}
let onChange: Function;
const props: DraggerProps = {
name: 'file',
action: async (file) => {
const res = await presignedUrl(file.name);
return res.data;
},
async customRequest(options) {
const { onSuccess, file, action } = options;
const res = await axios.put(action, file);
onSuccess!(res.data);
},
onChange(info) {
const { status } = info.file;
if (status === 'done') {
onChange('http://localhost:9000/chat-room/' + info.file.name);
message.success(`${info.file.name} 文件上传成功`);
} else if (status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
}
};
const dragger = <Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到这个区域来上传</p>
</Dragger>
export function ImageUpload(props: ImageUploadProps) {
onChange = props.onChange!
return props?.value ? <div>
<img src={props.value} alt="图片" width="100" height="100"/>
{dragger}
</div>: <div>
{dragger}
</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
和之前上传头像的逻辑一样。
然后在 Chat 组件里用一下：
const [isUploadImageModalOpen, setUploadImageModalOpen] = useState(false);
1
setUploadImageModalOpen(true);
1
<UploadImageModal isOpen={isUploadImageModalOpen} handleClose={(imgSrc) => {
setUploadImageModalOpen(false);
console.log(imgSrc);
}} />
1
2
3
4
2
3
4
测试下：
上传成功，点击确认按钮，在控制台打印了图片 url。
我们把这个 url 作为消息发送就好了。
首先在 sendMessage 方法加一个 type 参数，可以指定 image、text、file，默认是 text。
然后上传完图片之后，调用 sendMessage 方法，type 为 image：
另外，消息展示的时候也要根据类型做下处理：
import { Button, Input, message, Popover } from "antd";
import { useEffect, useRef, useState } from "react";
import { io, Socket } from "socket.io-client";
import './index.scss';
import { chatHistoryList, chatroomList } from "../../interfaces";
import { UserInfo } from "../UpdateInfo";
import TextArea from "antd/es/input/TextArea";
import { useLocation } from "react-router-dom";
import EmojiPicker from "@emoji-mart/react";
import data from '@emoji-mart/data'
import { UploadImageModal } from "./UploadImageModal";
interface JoinRoomPayload {
chatroomId: number
userId: number
}
interface SendMessagePayload {
sendUserId: number;
chatroomId: number;
message: Message
}
type MessageType = 'image' | 'text' | 'file';
interface Message {
type: MessageType
content: string
}
type Reply = {
type: 'sendMessage'
userId: number
message: ChatHistory
} | {
type: 'joinRoom'
userId: number
}
interface Chatroom {
id: number;
name: string;
createTime: Date;
}
interface ChatHistory {
id: number
content: string
type: number
chatroomId: number
senderId: number
createTime: Date,
sender: UserInfo
}
interface User {
id: number;
email: string;
headPic: string;
nickName: string;
username: string;
createTime: Date;
}
export function getUserInfo(): User {
return JSON.parse(localStorage.getItem('userInfo')!);
}
export function Chat() {
const socketRef = useRef<Socket>();
const [roomId, setChatroomId] = useState<number>();
const userInfo = getUserInfo();
const [isUploadImageModalOpen, setUploadImageModalOpen] = useState(false);
useEffect(() => {
if(!roomId) {
return;
}
const socket = socketRef.current = io('http://localhost:3005');
socket.on('connect', function() {
const payload: JoinRoomPayload = {
chatroomId: roomId,
userId: userInfo.id
}
socket.emit('joinRoom', payload);
socket.on('message', (reply: Reply) => {
if(reply.type === 'sendMessage') {
setChatHistory((chatHistory) => {
return chatHistory ? [...chatHistory, reply.message] : [reply.message]
});
setTimeout(() => {
document.getElementById('bottom-bar')?.scrollIntoView({block: 'end'});
}, 300);
}
});
});
return () => {
socket.disconnect();
}
}, [roomId]);
function sendMessage(value: string, type: MessageType = 'text') {
if(!value) {
return;
}
if(!roomId) {
return;
}
const payload: SendMessagePayload = {
sendUserId: userInfo.id,
chatroomId: roomId,
message: {
type,
content: value
}
}
socketRef.current?.emit('sendMessage', payload);
}
const [roomList, setRoomList] = useState<Array<Chatroom>>();
async function queryChatroomList() {
try{
const res = await chatroomList();
if(res.status === 201 || res.status === 200) {
setRoomList(res.data.map((item: Chatroom) => {
return {
...item,
key: item.id
}
}));
}
} catch(e: any){
console.log(e);
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
useEffect(() => {
queryChatroomList();
}, []);
useEffect(() => {
setTimeout(() => {
document.getElementById('bottom-bar')?.scrollIntoView({block: 'end'});
}, 300);
}, [roomId])
const [chatHistory, setChatHistory] = useState<Array<ChatHistory>>();
async function queryChatHistoryList(chatroomId: number) {
try{
const res = await chatHistoryList(chatroomId);
if(res.status === 201 || res.status === 200) {
setChatHistory(res.data.map((item: Chatroom) => {
return {
...item,
key: item.id
}
}));
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
const [inputText, setInputText] = useState('');
const location = useLocation();
useEffect(() => {
if(location.state?.chatroomId) {
setChatroomId(location.state?.chatroomId);
queryChatHistoryList(location.state?.chatroomId);
}
}, [location.state?.chatroomId]);
return <div id="chat-container">
<div className="chat-room-list">
{
roomList?.map(item => {
return <div className={`chat-room-item ${item.id === roomId ? 'selected' : ''}`} key={item.id} data-id={item.id} onClick={() => {
queryChatHistoryList(item.id);
setChatroomId(item.id);
}}>{item.name}</div>
})
}
</div>
<div className="message-list">
{chatHistory?.map(item => {
return <div className={`message-item ${item.senderId === userInfo.id ? 'from-me' : ''}`} key={item.id} data-id={item.id}>
<div className="message-sender">
<img src={item.sender.headPic} />
<span className="sender-nickname">{item.sender.nickName}</span>
</div>
<div className="message-content">
{
item.type === 0
? item.content
: item.type === 1
? <img src={item.content} style={{maxWidth: 200}}/>
: item.content
}
</div>
</div>
})}
<div id="bottom-bar" key='bottom-bar'></div>
</div>
<div className="message-input">
<div className="message-type">
<div className="message-type-item" key={1}>
<Popover content={<EmojiPicker data={data} onEmojiSelect={(emoji: any) => {
setInputText((inputText) => inputText + emoji.native)
}} />} title="Title" trigger="click">
表情
</Popover>
</div>
<div className="message-type-item" key={2} onClick={() => {
setUploadImageModalOpen(true);
}}>图片</div>
<div className="message-type-item" key={3}>文件</div>
</div>
<div className="message-input-area">
<TextArea className="message-input-box" value={inputText} onChange={(e) => {
setInputText(e.target.value)
}}/>
<Button className="message-send-btn" type="primary" onClick={() => {
sendMessage(inputText)
setInputText('');
}}>发送</Button>
</div>
</div>
<UploadImageModal isOpen={isUploadImageModalOpen} handleClose={(imgSrc) => {
setUploadImageModalOpen(false);
if(imgSrc) {
sendMessage(imgSrc, 'image')
}
}} />
</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
测试下：
这样，发送图片功能就完成了。
发送文件其实和这个差不多，只是展示的方式不同。
可以图片上传的逻辑，稍微改造下：
把 ImageUpload 组件改名为 FileUpload 组件，加一个 type 参数：
type 为 file 的时候，预览部分直接展示 value：
import { InboxOutlined } from "@ant-design/icons";
import { message } from "antd";
import Dragger, { DraggerProps } from "antd/es/upload/Dragger";
import axios from "axios";
import { presignedUrl } from "../../interfaces";
interface FileUploadProps {
value?: string;
onChange?: Function
type: 'image' | 'file'
}
let onChange: Function;
const props: DraggerProps = {
name: 'file',
action: async (file) => {
const res = await presignedUrl(file.name);
return res.data;
},
async customRequest(options) {
const { onSuccess, file, action } = options;
const res = await axios.put(action, file);
onSuccess!(res.data);
},
onChange(info) {
const { status } = info.file;
if (status === 'done') {
onChange('http://localhost:9000/chat-room/' + info.file.name);
message.success(`${info.file.name} 文件上传成功`);
} else if (status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
}
};
const dragger = <Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到这个区域来上传</p>
</Dragger>
export function FileUpload(props: FileUploadProps) {
onChange = props.onChange!
return props?.value ? <div>
{
props.type === 'image'
? <img src={props.value} alt="图片" width="100" height="100"/>
: props.value
}
{dragger}
</div>: <div>
{dragger}
</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
然后 UploadImageModal 改名为 UploadModal
也增加一个 type 参数，展示不同文案。
import { Modal } from "antd";
import { FileUpload } from "./FileUpload";
import { useState } from "react";
interface UploadModalProps {
isOpen: boolean;
handleClose: (fileUrl?: string) => void
type: 'image' | 'file'
}
export function UploadModal(props: UploadModalProps) {
const [fileUrl, setFileUrl] = useState<string>('');
return <Modal
title={`上传${props.type === 'image' ? '图片' : '文件'}`}
open={props.isOpen}
onOk={() => {
props.handleClose(fileUrl)
setFileUrl('')
}}
onCancel={() => props.handleClose()}
okText={'确认'}
cancelText={'取消'}
>
<FileUpload value={fileUrl} type={props.type} onChange={(value: string) => {
setFileUrl(value)
}}/>
</Modal>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
最后，在 Chat/index.tsx 里引入修改后的组件：
加一个 uploadType 的参数，点击图片、文件按钮会设置不同的 type。
然后发送消息的时候，根据 type 来发：
然后改下展示的内容：
文件就直接展示路径好了。
import { Button, Input, message, Popover } from "antd";
import { useEffect, useRef, useState } from "react";
import { io, Socket } from "socket.io-client";
import './index.scss';
import { chatHistoryList, chatroomList } from "../../interfaces";
import { UserInfo } from "../UpdateInfo";
import TextArea from "antd/es/input/TextArea";
import { useLocation } from "react-router-dom";
import EmojiPicker from "@emoji-mart/react";
import data from '@emoji-mart/data'
import { UploadModal } from "./UploadModal";
interface JoinRoomPayload {
chatroomId: number
userId: number
}
interface SendMessagePayload {
sendUserId: number;
chatroomId: number;
message: Message
}
type MessageType = 'image' | 'text' | 'file';
interface Message {
type: MessageType
content: string
}
type Reply = {
type: 'sendMessage'
userId: number
message: ChatHistory
} | {
type: 'joinRoom'
userId: number
}
interface Chatroom {
id: number;
name: string;
createTime: Date;
}
interface ChatHistory {
id: number
content: string
type: number
chatroomId: number
senderId: number
createTime: Date,
sender: UserInfo
}
interface User {
id: number;
email: string;
headPic: string;
nickName: string;
username: string;
createTime: Date;
}
export function getUserInfo(): User {
return JSON.parse(localStorage.getItem('userInfo')!);
}
export function Chat() {
const socketRef = useRef<Socket>();
const [roomId, setChatroomId] = useState<number>();
const userInfo = getUserInfo();
const [isUploadModalOpen, setUploadModalOpen] = useState(false);
useEffect(() => {
if(!roomId) {
return;
}
const socket = socketRef.current = io('http://localhost:3005');
socket.on('connect', function() {
const payload: JoinRoomPayload = {
chatroomId: roomId,
userId: userInfo.id
}
socket.emit('joinRoom', payload);
socket.on('message', (reply: Reply) => {
if(reply.type === 'sendMessage') {
setChatHistory((chatHistory) => {
return chatHistory ? [...chatHistory, reply.message] : [reply.message]
});
setTimeout(() => {
document.getElementById('bottom-bar')?.scrollIntoView({block: 'end'});
}, 300);
}
});
});
return () => {
socket.disconnect();
}
}, [roomId]);
function sendMessage(value: string, type: MessageType = 'text') {
if(!value) {
return;
}
if(!roomId) {
return;
}
const payload: SendMessagePayload = {
sendUserId: userInfo.id,
chatroomId: roomId,
message: {
type,
content: value
}
}
socketRef.current?.emit('sendMessage', payload);
}
const [roomList, setRoomList] = useState<Array<Chatroom>>();
async function queryChatroomList() {
try{
const res = await chatroomList();
if(res.status === 201 || res.status === 200) {
setRoomList(res.data.map((item: Chatroom) => {
return {
...item,
key: item.id
}
}));
}
} catch(e: any){
console.log(e);
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
useEffect(() => {
queryChatroomList();
}, []);
useEffect(() => {
setTimeout(() => {
document.getElementById('bottom-bar')?.scrollIntoView({block: 'end'});
}, 300);
}, [roomId])
const [chatHistory, setChatHistory] = useState<Array<ChatHistory>>();
async function queryChatHistoryList(chatroomId: number) {
try{
const res = await chatHistoryList(chatroomId);
if(res.status === 201 || res.status === 200) {
setChatHistory(res.data.map((item: Chatroom) => {
return {
...item,
key: item.id
}
}));
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
const [inputText, setInputText] = useState('');
const location = useLocation();
useEffect(() => {
if(location.state?.chatroomId) {
setChatroomId(location.state?.chatroomId);
queryChatHistoryList(location.state?.chatroomId);
}
}, [location.state?.chatroomId]);
const [uploadType, setUploadType] = useState<'image' | 'file'>('image');
return <div id="chat-container">
<div className="chat-room-list">
{
roomList?.map(item => {
return <div className={`chat-room-item ${item.id === roomId ? 'selected' : ''}`} key={item.id} data-id={item.id} onClick={() => {
queryChatHistoryList(item.id);
setChatroomId(item.id);
}}>{item.name}</div>
})
}
</div>
<div className="message-list">
{chatHistory?.map(item => {
return <div className={`message-item ${item.senderId === userInfo.id ? 'from-me' : ''}`} key={item.id} data-id={item.id}>
<div className="message-sender">
<img src={item.sender.headPic} />
<span className="sender-nickname">{item.sender.nickName}</span>
</div>
<div className="message-content">
{
item.type === 0
? item.content
: item.type === 1
? <img src={item.content} style={{maxWidth: 200}}/>
: <div>item.content</div>
}
</div>
</div>
})}
<div id="bottom-bar" key='bottom-bar'></div>
</div>
<div className="message-input">
<div className="message-type">
<div className="message-type-item" key={1}>
<Popover content={<EmojiPicker data={data} onEmojiSelect={(emoji: any) => {
setInputText((inputText) => inputText + emoji.native)
}} />} title="Title" trigger="click">
表情
</Popover>
</div>
<div className="message-type-item" key={2} onClick={() => {
setUploadType('image');
setUploadModalOpen(true);
}}>图片</div>
<div className="message-type-item" key={3}onClick={() => {
setUploadType('file');
setUploadModalOpen(true);
}}>文件</div>
</div>
<div className="message-input-area">
<TextArea className="message-input-box" value={inputText} onChange={(e) => {
setInputText(e.target.value)
}}/>
<Button className="message-send-btn" type="primary" onClick={() => {
sendMessage(inputText)
setInputText('');
}}>发送</Button>
</div>
</div>
<UploadModal isOpen={isUploadModalOpen} type={uploadType} handleClose={(fileUrl) => {
setUploadModalOpen(false);
if(fileUrl) {
sendMessage(fileUrl, uploadType)
}
}} />
</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
试下效果：
发送图片：
发送文件：
都没问题。
当时我们服务端没支持 file，改一下：
const map = {
text: 0,
image: 1,
file: 2
}
const history = await this.chatHistoryService.add(payload.chatroomId, {
content: payload.message.content,
type: map[payload.message.type],
chatroomId: payload.chatroomId,
senderId: payload.sendUserId
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
然后在前端支持下文件下载：
<a download href={item.content}>{item.content}</a>
1
现在，就可以发送和下载文件了：
整体测试下：
发送表情：
发送图片：
发送文件：
都没问题。
# 总结
这节我们实现了发送表情、图片、文件。
表情用 emoji-mart 这个包实现。
图片就是之前的上传图片，只是上传完把 url 作为消息发过去，设置下 type 为 image。
文件也是一样上传，上传完把 url 作为消息发过去，设置 type 为 file。
然后展示 image 和 file 的时候分别作为图片展示，以及支持下载。
这样，发送表情、图片、文件的功能就完成了。