Добрый день. Я хочу создать мессенджер с помощью Chatkit и React. Но у меня выпадает такая ошибка: 'Chatkit' is not defined no-undef. Как решить подобную проблему?? Код прилагаю
/index.js/
import React from "react";
import ReactDOM from "react-dom";
const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/51cb3879-c401-488b-bc31-bfd35d881ffd/token"
const instanceLocator = "v1:us1:51cb3879-c401-488b-bc31-bfd35d881ffd"
const roomId = 12775221
const username = 'clever'
class App extends React.Component {
constructor() {
super()
this.state = {
messages: []
}
this.sendMessage = this.sendMessage.bind(this)
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: instanceLocator,
userId: 'janedoe',
tokenProvider: new Chatkit.TokenProvider({
url: testToken
})
})
chatManager.connect()
.then(currentUser => {
this.currentUser = currentUser
this.currentUser.subscribeToRoom({
roomId: roomId,
hooks: {
onNewMessage: message => {
this.setState({
messages: [...this.state.messages, message]
})
}
}
})
})
}
sendMessage(text) {
this.currentUser.sendMessage({
text,
roomId: roomId
})
}
render() {
return (
<div className="app">
<Title />
<MessageList
roomId={this.state.roomId}
messages={this.state.messages} />
<SendMessageForm
sendMessage={this.sendMessage} />
</div>
);
}
}
class MessageList extends React.Component {
render() {
return (
<ul className="message-list">
{this.props.messages.map((message, index) => {
return (
<li key={message.id} className="message">
<div>{message.senderId}</div>
<div>{message.text}</div>
</li>
)
})}
</ul>
)
}
}
class SendMessageForm extends React.Component {
constructor() {
super()
this.state = {
message: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
this.setState({
message: e.target.value
})
}
handleSubmit(e) {
e.preventDefault()
this.props.sendMessage(this.state.message)
this.setState({
message: ''
})
}
render() {
return (
<form
onSubmit={this.handleSubmit}
className="send-message-form">
<input
onChange={this.handleChange}
value={this.state.message}
placeholder="Type your message and hit ENTER"
type="text" />
</form>
)
}
}
function Title() {
return <p className="title">My awesome chat app</p>
}
ReactDOM.render(<App />, document.getElementById('root'));
/index.html/
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@pusher/chatkit"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
<script src="index.js" type="text/babel"></script>
</body>
</html>
