websocket使用(vue模板)

1.搭建vue框架

在我们需要的位置使用我们的命令创建我们的vue框架

vue create websocketDemo

2.安装websocket依赖

npm install websocket

3.书写我们node服务端代码,并且启动服务

 这里我建议server命令创建在我们的src目录下与main.js平级 

大家也可以放到根目录下

server.js代码

const WebSocket = require('websocket').server;
const http = require('http');

// 创建 HTTP 服务器
const server = http.createServer(function(request, response) {
  // 处理 HTTP 请求
});

// 监听端口号
server.listen(8000, function() {
  console.log('Server is listening on port 8000');
});

// 创建 WebSocket 服务器
const wsServer = new WebSocket({
  httpServer: server
});

// 存储所有连接的客户端
const clients = {}; 

wsServer.on('request', function(request) {
  // 接受连接请求
  const connection = request.accept(null, request.origin);
  
  // 生成一个客户端ID，并将连接存储到clients中
  const clientId = Date.now();
  clients[clientId] = connection;

  // 监听message事件，当接收到客户端的消息时，广播给其他客户端
  connection.on('message', function(message) {
    const msg = message.utf8Data;
    console.log('Received Message:', msg);

    for (const id in clients) {
      if (id !== clientId) {
        clients[id].sendUTF(msg);
      }
    }
  });

  // 监听close事件，当客户端关闭连接时，删除对应的连接记录
  connection.on('close', function(reasonCode, description) {
    console.log('Client has disconnected.');
    delete clients[clientId];
  });
});

书写完毕之后我们可以启动node服务

node server.js

服务启动成功开始监听8000端口

4.书写我们前端页面代码向服务端发送内容

<template>
  <div>
    <div v-if="!connected">Connecting to server...</div>
    <div v-else>
      <div v-if="!username">
        <input v-model="usernameInput" placeholder="Enter your name">
        <button @click="joinChat">Join</button>
      </div>
      <div v-else>
        <div v-for="(message, index) in messages" :key="index">
          <span v-if="message.from === username" class="me">{{ message.from }}: </span>
          <span v-else>{{ message.from }}: </span>
          {{ message.text }}
        </div>
        <div>
          <input v-model="messageInput" placeholder="Type your message" @keyup.enter="sendMessage">
          <button @click="sendMessage">Send</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      connected: false,
      usernameInput: '',
      username: '',
      messageInput: '',
      messages: []
    }
  },
  mounted() {
    this.connect();
  },
  methods: {
    connect() {
      this.ws = new WebSocket('ws://localhost:8000');

      this.ws.onopen = () => {
        console.log('WebSocket connection established');
        this.connected = true;
      };

      this.ws.onmessage = (event) => {
        console.log('Received Message:', event.data);
        const message = JSON.parse(event.data);
        this.messages.push(message);
      };

      this.ws.onclose = () => {
        console.log('WebSocket connection closed');
        this.connected = false;
      };
    },
    joinChat() {
      if (this.usernameInput !== '') {
        this.username = this.usernameInput;
        this.usernameInput = '';
      }
    },
    // 发送
    sendMessage() {
      if (this.messageInput !== '') {
        const message = {
          from: this.username,
          text: this.messageInput
        };
        this.ws.send(JSON.stringify(message));
        this.messageInput = '';
      }
    }
  },
  beforeDestroy() {
    if (this.connected) {
      this.ws.close();
    }
  }
}
</script>

<style>
.me {
  font-weight: bold;
}
</style>

 5.启动项目查看我们页面内容

1.创建我们的名字

 2.发送我们的内容

 

本文章中直接提供websocket最详细前端和node端代码以及使用步骤和内容详解

 如果符合您的意愿,请点赞关注收藏 谢谢您的支持