Так что дело в том, что я следовал руководству на YouTube по созданию приложения чата с vue + socket.io, но не смог отправлять какие-либо сообщения https://www.youtube.com/watch?v=htzYhhjizkg просто очень хочу выяснить, в чем проблема, которую я тожеполучить 0 сообщений об ошибках На самом деле проблема начинается с самого начала, потому что она ничего не поддерживает в журнале, например, когда я присоединяюсь и т. д.
Я нашел правильный путь к socket.io.js, но это не помогло
ФАЙЛ HTML:
<!DOCTYPE html>
<html>
<head>
<title>mikhailosev</title>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<h1>Mikhailosev</h1>
<div id="app">
<div v-if="state == 0">
<h3>Welcome! Please choose a username</h3>
<form @submit.prevent="setUsername">
<input type="text" placeholder="Username..." v-model:value="username" />
<input type="submit" value="Join" />
</form>
<button @click="continueWithoutUsername">Join as a Guest</button>
</div>
<div v-if="state == 1">
<ul id="chatbox">
<li v-for="message in messages">
<b>{{ message.user }}:</b> {{ message.message }}
</li>
</ul>
<form @submit.prevent="sendMessage">
<input type="text" placeholder="Message..." v-model:value="message" />
<input type="submit" value="Send" />
</form>
</div>
</div>
<script src="/vuechat/node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var socket = null;
var app = new Vue({
// State 0: select username
// State 1: chat application
el: '#app',
data: {
messages: [],
message: '',
username: '',
state: 0
},
methods: {
sendMessage: function () {
socket.emit('message', this.message);
this.message = '';
},
setUsername: function () {
socket.emit('join', this.username);
this.username = '';
this.state = 1;
},
continueWithoutUsername: function () {
socket.emit('join', null);
this.state = 1;
}
},
created: function () {
socket = io();
},
mounted: function () {
socket.on('message', function (message) {
app.messages.push(message);
// this needs to be done AFTER vue updates the page!!
app.$nextTick(function () {
var messageBox = document.getElementById('chatbox');
messageBox.scrollTop = messageBox.scrollHeight;
});
});
}
});
</script>
</body>
</html>
ФАЙЛ JS
import express, { static } from 'express';
const app = express()
const http = require('http').Server(app)
const io = require('socket.io')(http)
app.use('/style', static(__dirname + '/style'))
app.get('/', (req, res) => {
return res.sendFile(__dirname + '/index.html');
})
io.on('connection', (socket) => {
socket.username = 'anonymous';
socket.on('change username', (name) => socket.username = name)
socket.on('message', (msg) => io.emit('message',
{ 'user': socket.username, 'message': msg }))
socket.on('join', (username) => {
if (username != null) {
socket.username = username
}
socket.broadcast.emit('message',
{ 'user': 'Server', 'message': socket.username + ' has joined!'})
})
})
http.listen(3000, () => console.log('listening on port 3000'))
PACKAGE.JSON
{
"name": "vuechat",
"version": "1.0.0",
"description": "",
"main": "chat.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Mikhailosev",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"socket.io": "^2.2.0"
}
}
Expected meassages to popup, conslog to work