Question

所以事情是，我正在遵循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

用套接字io + vue获取结果的问题

0 个答案: