Chúng tôi đã nêu vấn đề này trong chương trước, rằng bạn cần làm mới trang để xem các tin nhắn trò chuyện mới. Trong chương này, chúng tôi sẽ khắc phục vấn đề đó. Chúng tôi sẽ thực hiện trò chuyện theo thời gian thực bằng cách sử dụng Socket IO
Video hướng dẫn
Cài đặt Socket IO trong Vue JS
Vì vậy, hãy tiếp tục và cài đặt ổ cắm thư viện. io-client bằng cách chạy lệnh sau trong CMD được mở trong thư mục web
> npm install socket.io-client
Sau đó đưa nó vào AppHeader của bạn. thành phần vue
import { io } from 'socket.io-client'
Và bên trong phương thức được gắn kết của bạn, hãy tạo một tham chiếu toàn cầu cho phiên bản của Socket IO. API của chúng tôi sẽ phục vụ như một ổ cắm
global.socketIO = io[this.$apiURL]
Sau đó, trong phương thức
global.socketIO = io[this.$apiURL]6 của bạn, sau câu lệnh
global.socketIO = io[this.$apiURL]7, bạn cần viết đoạn mã sau
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
Điều này trước tiên sẽ kết nối người dùng với ổ cắm. Sau đó, nó sẽ bắt đầu lắng nghe sự kiện
global.socketIO = io[this.$apiURL]8. Ngay khi nhận được sự kiện đó, nó sẽ tạo một phiên bản bánh mì nướng bằng thư viện cảnh báo ngọt ngào và hiển thị ở dưới cùng bên phải
Ổ cắm
global.socketIO = io[this.$apiURL]9 sẽ chứa một đối tượng tin nhắn mà chúng ta sẽ sử dụng sau này để tự động thêm nó vào màn hình trò chuyện. Và tiêu đề mà chúng tôi sẽ hiển thị trong bánh mì nướng
Chúng tôi đang làm điều này trong AppHeader. vue vì chúng tôi muốn người nhận nhận được thông báo cho dù anh ta đang ở trang nào. Bởi vì thành phần AppHeader sẽ được bao gồm trên mọi trang
Cài đặt Socket IO trên Node JS
Chạy lệnh sau trong CMD được mở trong thư mục api
________số 8
Sau đó thêm các dòng sau trước khi nghe HTTP trong máy chủ. js
// sockets are used for realtime communication
const socketIO = require["socket.io"][http, {
cors: {
origin: ["//localhost:8080"]
}
}];
// array that holds all connected users socket ID
global.users = [];
Thao tác này sẽ tạo một phiên bản
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
0 từ máy chủ HTTP và đặt nguồn gốc CORS thành URL ứng dụng khách của bạn. Ngoài ra, nó tạo ra một mảng người dùng toàn cầu nơi chúng tôi sẽ lưu trữ ID ổ cắm của tất cả người dùng cùng với địa chỉ email của họGhi chú. ID ổ cắm được sử dụng để gửi sự kiện đến từng người dùng
Sau đó viết đoạn mã sau sau khi cơ sở dữ liệu được kết nối
import { io } from 'socket.io-client'
1Điều này trước tiên sẽ tạo kết nối với ổ cắm. Sau đó, nó sẽ bắt đầu lắng nghe sự kiện “được kết nối” từ bất kỳ máy khách nào. Khách hàng phải gửi địa chỉ email của mình trong khi kích hoạt sự kiện này. Nó sẽ lưu trữ ID ổ cắm trong mảng
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
1 bằng cách đặt khóa làm địa chỉ email của khách hàng. Vì vậy, đây sẽ trở thành một mảng kết hợpLàm mới ứng dụng khách của bạn và kiểm tra CMD của bạn từ thư mục api. Bạn sẽ thấy mảng của người dùng có ID ổ cắm được lưu trữ làm giá trị và địa chỉ email làm khóa
Chỉ phát sự kiện cho người nhận
Vì Socket IO được cài đặt ở cả hai phía, máy khách và máy chủ, giờ đây chúng ta có thể dễ dàng thực hiện cuộc trò chuyện của mình theo thời gian thực bằng cách sử dụng Socket IO. Bạn chỉ cần phát ra sự kiện khi tin nhắn được gửi từ máy chủ. Mở api/mô-đun/trò chuyện của bạn. js và tạo thuộc tính
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
0 trong đóimport { io } from 'socket.io-client'
4Sau đó, trong “máy chủ của bạn. js”, thêm dòng sau sau khi kết nối socket IO được thực hiện
import { io } from 'socket.io-client'
5Điều này cũng sẽ đặt ổ cắm cho mô-đun trò chuyện. Sau đó, trong cuộc trò chuyện của bạn. js bên trong “/send” POST route, hãy viết những dòng sau sau khi tạo
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
3import { io } from 'socket.io-client'
7Điều này trước tiên sẽ kiểm tra xem đầu thu có được kết nối với ổ cắm không. Nếu người nhận đã mở trang web và đăng nhập, thì anh ta sẽ tự động được kết nối và điều kiện này trở thành đúng
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
4 nhận ID ổ cắm của người nhận làm tham số để trò chuyện theo thời gian thực. Chúng tôi đã lưu trữ tất cả ID ổ cắm trong mảng người dùng toàn cầu của chúng tôi. Vì vậy, chúng tôi chỉ cần lấy nó từ mảng của người dùng. Và cuối cùng, chúng tôi đang phát sự kiện “sendMessage” và gửi tiêu đề và đối tượng thông báo dưới dạng dữ liệuĐể kiểm tra điều này, bạn cần mở song song trình gửi và nhận trên 2 trình duyệt khác nhau. Gửi tin nhắn cho người khác và bạn sẽ thấy cửa sổ bật lên chúc mừng ở dưới cùng bên phải của người nhận mà không cần phải làm mới trang
Bạn có thể thấy rằng một thông báo tin nhắn mới đã được hiển thị ở phía dưới bên phải của người nhận [cửa sổ bên trái]. Bây giờ chúng ta cần tạo nó để nối thêm tin nhắn nếu trang trò chuyện đang mở. Để biến trang trò chuyện của chúng ta thành thời gian thực, chúng ta cũng cần sử dụng Socket IO trên ChatComponent của mình
Tạo một cửa hàng Vuex
Vì trình nghe sự kiện socket IO của chúng tôi nằm trong AppHeader và chúng tôi muốn nối thêm vào một mảng trong ChatComponent, chúng tôi cần sử dụng Vuex Store. Đầu tiên, tạo một thư mục có tên “vuex” trong thư mục “web/src” của bạn. Sau đó, bên trong nó, tạo một tệp có tên là cửa hàng lưu trữ. js”
Sau đó chạy lệnh sau trong CMD đã mở trong thư mục web để cài đặt vuex
import { io } from 'socket.io-client'
0Sau đây sẽ là mã của cửa hàng. tập tin js
import { io } from 'socket.io-client'
1Nó bao gồm một phương thức có tên là
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
5 từ thư viện vuex. Nó tạo một đối tượng từ nó và khởi tạo socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
6 mảng. socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
7 sẽ đặt giá trị và socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
8 được sử dụng để nhận các giá trịQuay lại ChatComponent của bạn, trước tiên, hãy bao gồm cửa hàng này
import { io } from 'socket.io-client'
2Chúng ta phải lùi lại một bước vì vuex nằm trong thư mục src và ChatComponent nằm trong thư mục “src/components”
Sau đó xóa
socketIO.emit["connected", this.$user.email]
socketIO.on["sendMessage", async function [data] {
const Toast = swal.mixin[{
toast: true,
position: 'bottom-right',
customClass: {
popup: 'colored-toast'
},
showConfirmButton: false,
timer: 10000,
timerProgressBar: true
}]
await Toast.fire[{
title: data.title
}]
}]
9 khỏi > npm install socket.io0 đối tượng khỏi ChatComponent. Và thêm phần sau vào đối tượng
> npm install socket.io1 của bạn
import { io } from 'socket.io-client'
3Và trong
> npm install socket.io2 khi tất cả các tin nhắn được tìm nạp, hãy làm điều này
import { io } from 'socket.io-client'
4Quay trở lại AppHeader. vue và bao gồm cả cửa hàng ở đó
import { io } from 'socket.io-client'
5Chúng ta phải quay lại hai bước vì vuex nằm trong thư mục src và AppHeader nằm trong thư mục “src/components/layouts”
Sau đó, chỉ cần viết các dòng sau vào trình xử lý sự kiện
global.socketIO = io[this.$apiURL]8 trong AppHeader. vue
import { io } from 'socket.io-client'
6Chạy ứng dụng ngay bây giờ và mở cả hai cuộc trò chuyện. Ngay sau khi bạn gửi tin nhắn, bạn sẽ thấy rằng người nhận sẽ thấy nó được thêm vào cuối cuộc trò chuyện. Nhưng người gửi vẫn phải làm mới trang
Bao gồm cửa hàng trong
> npm install socket.io4 ở trên cùng
import { io } from 'socket.io-client'
2Sau đó, chỉ cần thêm dòng sau vào sau trạng thái phản hồi là “success” trong phương thức
global.socketIO = io[this.$apiURL]8 trong
> npm install socket.io4 của bạn
import { io } from 'socket.io-client'
8Bây giờ người gửi cũng sẽ bắt đầu nhìn thấy tin nhắn đã gửi của mình
Hiển thị bộ đếm chưa đọc trong thời gian thực
Ngay bây giờ, nếu bạn đang ở trang chủ và ai đó gửi tin nhắn mới cho bạn, bạn sẽ thấy thông báo cảnh báo ở dưới cùng bên phải. Nhưng bạn không biết AI gửi tin nhắn?
Nó sẽ tăng bộ đếm chưa đọc mà chúng ta đã tạo trong các chương trước. Để làm điều đó, một lần nữa chúng tôi sẽ sử dụng danh bạ từ cửa hàng
Đầu tiên, đưa vuex/store vào ContactComponent giống như cách chúng tôi đưa vào ChatComponent. Sau đó xóa đối tượng
> npm install socket.io7 khỏi đối tượng
> npm install socket.io0. Và thêm địa chỉ liên hệ dưới dạng thuộc tính được tính toán
import { io } from 'socket.io-client'
9Sau đó mở cửa hàng của bạn. js và thêm mảng danh bạ vào đối tượng
> npm install socket.io9
global.socketIO = io[this.$apiURL]0
Và cũng tạo ra các đột biến và getters của nó
global.socketIO = io[this.$apiURL]1
Sau đó, trong phương thức
> npm install socket.io2 của bạn, hãy thay đổi dòng sau
global.socketIO = io[this.$apiURL]2
Với cái này
global.socketIO = io[this.$apiURL]3
Sau đó, trong thành phần AppHeader khi sự kiện
global.socketIO = io[this.$apiURL]8 được lắng nghe, hãy viết đoạn mã sau
global.socketIO = io[this.$apiURL]4
Nó sẽ nhận được tất cả các liên hệ và tăng theo bộ đếm chưa đọc thành 1 cho người dùng đã gửi tin nhắn
Vấn đề duy nhất bạn gặp phải lúc này là khi bạn mở lại cuộc trò chuyện, bạn sẽ nhận thấy rằng các tin nhắn đang được lặp lại. Đó là bởi vì chúng tôi đang thêm các tin nhắn vào mảng cửa hàng khi cuộc trò chuyện được mở
Phát hiện khi người dùng rời khỏi thành phần – Vue JS
Chúng tôi có thể đặt mảng tin nhắn thành trống ngay khi người dùng rời khỏi ChatComponent. Vì vậy, hãy thêm phần sau vào đối tượng ChatComponent
> npm install socket.io1 của bạn
global.socketIO = io[this.$apiURL]5
Điều này trước tiên sẽ kiểm tra xem href của tuyến đường hiện tại có “/chat/” trong đó không. Vì tất cả các trang trò chuyện sẽ có “/chat/” ngay từ đầu, nên điều kiện này trở thành đúng khi bạn rời khỏi trang trò chuyện và chuyển sang một trang khác
Nếu điều kiện này trở thành true, thì nó sẽ gọi hàm
// sockets are used for realtime communication
const socketIO = require["socket.io"][http, {
cors: {
origin: ["//localhost:8080"]
}
}];
// array that holds all connected users socket ID
global.users = [];
3 và truyền vào mảng trống. Chúng tôi đã tạo chức năng này trước đây. Vì vậy, bạn có thể thoải mái kiểm tra ngay bây giờ, sự cố này sẽ không xảy ra nữa