Chat ASP.NET Core SignalR với React.js - Tìm hiểu ngay

15/01/2024 01:23

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Razor Pages với JavaScript vanilla trên máy khách - trò chuyện đơn giản ASP.NET Core SignalR.

react-create-app

Chúng tôi sẽ sử dụng ứng dụng tạo React, đây là cách được hỗ trợ chính thức để tạo ứng dụng SPA bằng React. Nó không có cấu hình, nhưng nó sử dụng Webpack và Babel.

Nó rất dễ sử dụng và không yêu cầu cấu hình, nói chính xác là bạn không thể cấu hình nó. Nó đi kèm với 4 tập lệnh được xác định trước:

start – khởi động ứng dụng ở chế độ phát triển
kiểm tra - bắt đầu chạy thử ở chế độ xem tương tác
build – xây dựng ứng dụng để sản xuất, xuất ra thư mục build
đẩy ra - dưới dạng đầu ra, bạn nhận được các tệp ứng dụng + tệp cấu hình (babel, webpack, môi trường, đường dẫn, v.v.). Bạn không thể quay lại sau khi đẩy ứng dụng ra, bạn sẽ mất khả năng sử dụng công cụ tạo ứng dụng React không có cấu hình . Tuy nhiên, bạn có thể tùy chỉnh và định cấu hình mọi thứ theo ý muốn.

Chúng tôi sẽ chỉ sử dụng cái đầu tiên trong bài viết này.

Code

Chúng tôi sẽ sử dụng mã phía máy chủ giống như chúng tôi đã làm với cuộc trò chuyện đơn giản với Angular 5 .

Trước tiên hãy tạo một ứng dụng React trống mới:

create-react-app codingblast

view raw asp-net-core-signalr-chat-react.sh hosted with ❤ by GitHub

Bây giờ chúng ta có thể thêm ngay gói npm SignalR:

npm install @aspnet/signalr-client

view raw asp-net-core-signalr-chat-react.sh hosted with ❤ by GitHub

Hãy thêm thành phần Trò chuyện của chúng tôi ngay bây giờ:

import React, { Component } from 'react';

class Chat extends Component {

constructor(props) {

super(props);

this.state = {

nick: '',

message: '',

messages: [],

hubConnection: null,

};

}

render() {

return <div>Here goes chat</div>;

}

}

export default Chat;

view raw Chat.jsx hosted with ❤ by GitHub

Chúng tôi đang sử dụng các thuộc tính tương tự như chúng tôi đã làm với trò chuyện Angular. Chúng ta chỉ cần nick, tin nhắn, tin nhắn và HubConnection.

Đầu tiên là biệt hiệu của người dùng, thứ hai là tin nhắn hiện tại đang được nhập vào đầu vào, tin nhắn dành cho tất cả các tin nhắn mà chúng tôi nhận được từ máy chủ.

Biệt hiệu của người dùng và kết nối với máy chủ chúng ta chỉ cần thiết lập một lần khi bắt đầu. Do đó, chúng tôi sẽ thêm phương thức vòng đời thành phầnDidMount:

componentDidMount = () => {

const nick = window.prompt('Your name:', 'John');

const hubConnection = new HubConnection('http://localhost:5000/chat');

this.setState({ hubConnection, nick });

}

view raw Chat.jsx hosted with ❤ by GitHub

Sau khi thiết lập nick và đối tượng HubConnection, chúng ta nên thử thiết lập kết nối với Máy chủ:

componentDidMount = () => {

const nick = window.prompt('Your name:', 'John');

const hubConnection = new HubConnection('http://localhost:5000/chat');

this.setState({ hubConnection, nick }, () => {

this.state.hubConnection

.start()

.then(() => console.log('Connection started!'))

.catch(err => console.log('Error while establishing connection :('));

});

}

view raw Chat.jsx hosted with ❤ by GitHub

Sau khi đạt được điều đó, bây giờ chúng ta có thể bắt đầu lắng nghe các sự kiện từ máy chủ. Chúng tôi sẽ chỉ mở rộng mã của mình bên trong lệnh gọi lại của setState. Chúng tôi sẽ thêm đoạn mã này:

this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {

const text = `${nick}: ${receivedMessage}`;

const messages = this.state.messages.concat([text]);

this.setState({ messages });

});

view raw Chat.jsx hosted with ❤ by GitHub

Chúng ta hãy xem thành phần Trò chuyện của chúng tôi trông như thế nào vào lúc này:

import React, { Component } from 'react';

import { HubConnection } from '@aspnet/signalr-client';

class Chat extends Component {

constructor(props) {

super(props);

this.state = {

nick: '',

message: '',

messages: [],

hubConnection: null,

};

}

componentDidMount = () => {

const nick = window.prompt('Your name:', 'John');

const hubConnection = new HubConnection('http://localhost:5000/chat');

this.setState({ hubConnection, nick }, () => {

this.state.hubConnection

.start()

.then(() => console.log('Connection started!'))

.catch(err => console.log('Error while establishing connection :('));

this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {

const text = `${nick}: ${receivedMessage}`;

const messages = this.state.messages.concat([text]);

this.setState({ messages });

});

});

}

render() {

return <div>Here goes chat</div>;

}

}

export default Chat;

view raw Chat.jsx hosted with ❤ by GitHub

Điều đó có vẻ ổn. Bây giờ, chúng ta cần thêm logic để gửi tin nhắn đến máy chủ. Ngoài ra, chúng ta cần hiển thị các tin nhắn thực tế trong chế độ xem và nút gửi tin nhắn.

Chúng tôi sẽ giữ phương thức gửi tin nhắn đơn giản:

sendMessage = () => {

this.state.hubConnection

.invoke('sendToAll', this.state.nick, this.state.message)

.catch(err => console.error(err));

this.setState({message: ''});

};

view raw Chat.jsx hosted with ❤ by GitHub

Sau khi gửi tin nhắn, chúng ta có thể xóa thuộc tính input – message.

Đây là chế độ xem để hoàn thành thành phần Trò chuyện của chúng tôi:

render() {

return (

<div>

<br />

<input

type="text"

value={this.state.message}

onChange={e => this.setState({ message: e.target.value })}

/>

<button onClick={this.sendMessage}>Send</button>

<div>

{this.state.messages.map((message, index) => (

<span style={{display: 'block'}} key={index}> {message} </span>

))}

</div>

</div>

);

}

view raw

	import React, { Component } from 'react';

	class Chat extends Component {
	constructor(props) {
	super(props);

	this.state = {
	nick: '',
	message: '',
	messages: [],
	hubConnection: null,
	};
	}

	render() {
	return <div>Here goes chat</div>;
	}
	}

	export default Chat;

	componentDidMount = () => {
	const nick = window.prompt('Your name:', 'John');

	const hubConnection = new HubConnection('http://localhost:5000/chat');

	this.setState({ hubConnection, nick });
	}

	this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {
	const text = `${nick}: ${receivedMessage}`;
	const messages = this.state.messages.concat([text]);
	this.setState({ messages });
	});

	import React, { Component } from 'react';
	import { HubConnection } from '@aspnet/signalr-client';

	class Chat extends Component {
	constructor(props) {
	super(props);

	this.state = {
	nick: '',
	message: '',
	messages: [],
	hubConnection: null,
	};
	}

	componentDidMount = () => {
	const nick = window.prompt('Your name:', 'John');

	const hubConnection = new HubConnection('http://localhost:5000/chat');

	this.setState({ hubConnection, nick }, () => {
	this.state.hubConnection
	.start()
	.then(() => console.log('Connection started!'))
	.catch(err => console.log('Error while establishing connection :('));

	this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {
	const text = `${nick}: ${receivedMessage}`;
	const messages = this.state.messages.concat([text]);
	this.setState({ messages });
	});
	});
	}

	render() {
	return <div>Here goes chat</div>;
	}
	}

	export default Chat;

	sendMessage = () => {
	this.state.hubConnection
	.invoke('sendToAll', this.state.nick, this.state.message)
	.catch(err => console.error(err));

	this.setState({message: ''});
	};

	render() {
	return (
	<div>
	<br />
	<input
	type="text"
	value={this.state.message}
	onChange={e => this.setState({ message: e.target.value })}
	/>

	<button onClick={this.sendMessage}>Send</button>

	<div>
	{this.state.messages.map((message, index) => (
	<span style={{display: 'block'}} key={index}> {message} </span>
	))}
	</div>
	</div>
	);
	}

Chat ASP.NET Core SignalR với React.js - Tìm hiểu ngay

react-create-app

Code

Tin tức cùng chủ đề