前端vue后端express写一个 websocket-Go服务器开发

下面是一个使用Vue.js作为前端框架，Express作为后端框架来实现WebSocket的简单示例：

首先，在你的项目中安装Vue.js和Express，可以使用以下命令：

npm install vue express

在前端（Vue.js）代码中，创建一个WebSocket连接并监听消息：

<template>
  <div>
    <h1>WebSocket Example</h1>
    <input type="text" v-model="message" placeholder="Enter a message">
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
      socket: null,
    };
  },
  methods: {
    sendMessage() {
      if (this.message.trim() !== '') {
        this.socket.send(this.message);
        this.message = '';
      }
    },
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:3000'); // 替换成你的后端地址

    this.socket.addEventListener('open', () => {
      console.log('WebSocket connected');
    });

    this.socket.addEventListener('message', event => {
      console.log('Received message:', event.data);
      this.messages.push(event.data);
    });
  },
};
</script>

<style scoped></style>

在后端（Express）代码中，创建WebSocket服务器并处理消息：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', ws => {
  console.log('WebSocket connected');

  ws.on('message', message => {
    console.log('Received message:', message);

    // 在这里可以对收到的消息进行处理，然后将结果返回给前端

    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('WebSocket disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

上述代码示例了一个简单的WebSocket实现。在前端，你可以输入消息并发送给后端，后端会将接收到的消息原样发送回去，并在前端展示出来。

请注意替换相应的地址和端口号，确保前后端能够正确通信。

内容由零声教学AI助手提供，问题来源于学员提问