Trung tâm cá nhân
sách gpt4 ăn đã đi

Hướng dẫn trò chuyện IM: gửi hình ảnh/video/giọng nói/biểu tượng cảm xúc

In lại Tác giả: qq735679552 Thời gian cập nhật: 29-09-2022 22:32:09 29 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN Hướng dẫn trò chuyện IM - Gửi hình ảnh/Video/Giọng nói/Biểu hiện này được tác giả sưu tầm và sắp xếp. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.

Bạn bè thường hỏi, làm cách nào để gửi hình ảnh, video, giọng nói và biểu tượng cảm xúc trong tin nhắn tức thời IM?

Vì lý do này, người biên tập đã đặc biệt viết một phiên bản vue của bản demo để thực hiện việc gửi hình ảnh, tệp video và biểu thức. Tham khảo mã nguồn của bản demo này, tôi tin rằng bạn có thể dễ dàng sử dụng uniapp và các chương trình nhỏ để hoàn thành các chức năng tương tự.

Hướng dẫn trò chuyện IM: gửi hình ảnh/video/giọng nói/biểu tượng cảm xúc

1. Gửi hình ảnh/video/giọng nói.

Về việc gửi giọng nói, video và hình ảnh, nếu bạn chú ý, khi sử dụng QQ hoặc WeChat, khi một người bạn gửi cho bạn hình ảnh và video, sẽ mất một lúc trước khi chúng hiển thị sau khi nhận được. Điều này là do khi gửi, chỉ có đường dẫn của tệp được gửi. Sau khi bạn nhận được, nó cần được tải trước khi có thể hiển thị. Vì IM chính thống hiện nay bao gồm WeChat, QQ, v.v. nên các phương thức gửi ảnh và video thông thường là:

  • Tải tập tin lên máy chủ tập tin
  • Đẩy đường dẫn tập tin
  • nhận đường dẫn tập tin
  • Tải tập tin

File nguồn sẽ không được truyền trực tiếp qua mạng, vì việc truyền file có dung lượng lớn sẽ ảnh hưởng đến tính tức thời của tin nhắn.

Để tải tệp lên, bạn có thể chọn tải trực tiếp lên máy chủ của riêng mình hoặc bạn có thể chọn tải lên dịch vụ lưu trữ đối tượng của nhiều dịch vụ đám mây khác nhau, tức là oss.

Mã nguồn tham khảo

demoservice.prototype.sendfilemessage = function (type,content) { let uploadresult = restapi.uploadfile(content); let message = new message(type, uploadresult.url); uploadresult.promise.then(() => { this.publish(message); },() => { var error = new message(messagetype.text, "Đã gửi thành công."); this.messages.unshift(error) }); return uploadresult.promise;};

oss của dịch vụ đám mây có độ ổn định tốt hơn và tính sẵn sàng cao, tốc độ tải lên được đảm bảo. Ngoài ra, nó cũng có thể hợp tác với CDN, vì vậy chúng tôi khuyên bạn nên sử dụng goeasy để hợp tác với dịch vụ oss để gửi hình ảnh và video.

Trong mã nguồn của bài viết này, oss của Alibaba Cloud được chọn làm máy chủ tải tệp lên. Bạn cũng có thể chuyển sang máy chủ tải tệp lên do chính mình triển khai hoặc chọn oss từ các dịch vụ đám mây khác.

2. Gửi biểu tượng cảm xúc.

Việc gửi biểu tượng cảm xúc cũng rất đơn giản nhưng đối với một số học sinh lần đầu gửi biểu tượng cảm xúc thì chỉ cần có ý tưởng là được.

Các bạn tinh ý hơn chắc đã phát hiện ra khi chat trên QQ, chúng ta nhập dấu gạch chéo ngược + "cy", như thế này: /cy, và QQ sẽ ngay lập tức hiển thị biểu tượng cảm xúc có răng cưa, giống như hình dưới đây:

Hướng dẫn trò chuyện IM: gửi hình ảnh/video/giọng nói/biểu tượng cảm xúc

Hahaha, tôi tin rằng trong lòng bạn đã chín trên mười lần rồi phải không?

Đúng vậy, quá trình gửi biểu tượng cảm xúc thực chất là gửi một chuỗi xác định như "/cy", chuỗi này được "dịch" thành biểu tượng cảm xúc sau khi bên kia nhận được.

Vậy tại sao không cứ gửi ảnh trực tiếp mà lại thực hiện một công việc “dịch thuật” phức tạp như vậy?

Vì chuỗi nhỏ hơn hình ảnh nên chúng có thể được gửi nhanh hơn và mang lại trải nghiệm người dùng tốt hơn. Có hàng nghìn người dùng trong một hệ thống. Việc sử dụng chuỗi có thể tiết kiệm rất nhiều băng thông và tài nguyên hệ thống.

Bây giờ nguyên tắc đã rõ ràng, hãy bắt đầu làm việc:

Bước đầu tiên là xác định biểu thức.

Xác định một đối tượng giá trị khóa, khóa là thẻ biểu thức và giá trị là hình ảnh tương ứng với mỗi thẻ biểu thức:

hãy biểu thức = { "[risus]": './images/risus.png', "[kiss]": './images/kiss.png', "[cry]": './images/cry.png ', "[die]": './images/die.png', "[tức giận]": './images/anger.png',}

Sau đó vẽ giao diện lựa chọn biểu thức:

Hướng dẫn trò chuyện IM: gửi hình ảnh/video/giọng nói/biểu tượng cảm xúc

Bước thứ hai là chọn một biểu thức.

Chuyển nhãn chuỗi của biểu thức vào sự kiện onclick của mỗi hình ảnh. Khi người dùng nhấp vào, nhãn của biểu thức sẽ được ghi vào hộp nhập và trở thành một chuỗi thông thường. Khi gửi, nội dung thực sự được gửi là nhãn của biểu thức, là một chuỗi.

 
{{text}}

Bước thứ ba là nhận và hiển thị biểu thức.

Khi bên kia nhận được một chuỗi, nó sẽ khớp chuỗi đó với danh sách khóa-giá trị được xác định ở bước đầu tiên. Nếu tìm thấy biểu thức tương ứng, hình ảnh biểu thức tương ứng sẽ được hiển thị trên trang. sẽ là một tin nhắn văn bản thông thường.

Sau khi nguyên tắc được giải thích rõ ràng, việc thực hiện cụ thể có đơn giản không?

Hãy tham khảo mã nguồn demo mà chúng tôi cung cấp và tôi tin rằng bạn sẽ sớm nắm vững được phương pháp triển khai.

Mã nguồn demo: https://gitee.com/goeasy-io/goeasydemo-vue-audiopicturevideo.

Tóm tắt.

Đến đây là phần kết thúc bài viết về hướng dẫn trò chuyện IM gửi hình ảnh/video/giọng nói/biểu cảm. Để biết thêm thông tin về cách gửi video trong trò chuyện IM, vui lòng tìm kiếm các bài viết trước của tôi hoặc tiếp tục duyệt qua các bài viết liên quan bên dưới. tương lai. Hãy ủng hộ tôi! .

Cuối cùng, bài viết này về hướng dẫn trò chuyện IM gửi hình ảnh/video/giọng nói/biểu tượng cảm xúc kết thúc ở đây. Nếu bạn muốn biết thêm về hướng dẫn trò chuyện IM gửi hình ảnh/video/giọng nói/biểu tượng cảm xúc, vui lòng tìm kiếm bài viết CFSDN. duyệt các bài viết liên quan, tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

29 4 0
Đề xuất bài viết: 5 công cụ so sánh mã tốt nhất được các lập trình viên yêu thích
Đề xuất bài viết: Tóm tắt những yếu tố cơ bản cần chú ý khi xây dựng website?
Đề xuất bài viết: Cách giải quyết lỗi 711 chi tiết lỗi kết nối mạng 711
Đề xuất bài viết: Lỗi có nghĩa là gì? Làm thế nào để xử lý lỗi khi máy tính nhắc?
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress