WebSocket初识·只见表象

淤瑜与玉
148 阅读3分钟

本文主要介绍如何使用WebSocket实现服务端和客户端之间的通信，以及如何在Node.js服务端和Vue客户端之间建立WebSocket连接。

背景

在项目开发中，有一个’实时报警弹窗‘的需求，顾名思义要做到’实时‘二字。之前碰到此类问题都是一个定时器定时向后台请求获取数据，可这次得由后台主动推送，这就不得不用到WebSocket了。

我猜一定有跟我一样初出茅庐的小伙伴都听说过此项技术，却从来没想了解过，突然之间不知如何下手。

因为目前还没接触过，导致也没有和服务端匹配过。最开始的也不知道是怎样匹配，逛遍各大博客网站全都是错综且复杂的案例，好生让人眼花缭乱。最后查阅了MDN官方文档才慢慢摸索出来一些。

WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务端之间的数据交换变得更加简单、高效，而无需像HTTP协议那样进行频繁的请求和响应。

在WebSocket中，客户端和服务端之间可以随时发送数据，并且可以同时接收对方发送的数据。当有新的消息到达时，WebSocket会触发相应的事件，从而使得客户端和服务端之间的通信变得实时、高效。

使用WebSocket实现实时通信

在Node.js服务端项目中，可以使用ws包来实现WebSocket服务端。在Vue客户端项目中，可以使用websocket包来实现WebSocket客户端。

下面是一个简单的示例，演示了如何在Node.js服务端和Vue客户端之间建立WebSocket连接：

开始之前，我们需要先安装一些必要的包：

  1. 在Node.js服务端项目中，使用npm或yarn安装ws包： npm install ws 或 yarn add ws
  2. 在Vue客户端项目中，使用npm或yarn安装websocket包： npm install websocket 或 yarn add websocket

服务端代码（Node.js）

const WebSocket = require('ws');

// 创建WebSocket服务器实例，监听指定端口
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on('connection', function connection(ws) {
  console.log('WebSocket连接已建立');

  // 监听收到客户端消息事件
  ws.on('message', function incoming(message) {
    console.log('收到客户端消息：', message);

    // 向客户端发送消息
    ws.send('Hello, client!');
  });

  // 监听连接关闭事件
  ws.on('close', function close() {
    console.log('WebSocket连接已关闭');
  });
});

记得起一下服务，否则客户端得不到响应 image.png

客户端代码（Vue）

<template>
  <div>
    <button @click="connect">连接服务器</button>
    <div v-if="connected">
      <input v-model="message" placeholder="输入消息" />
      <button @click="sendMessage">发送消息</button>
      <p>{{ serverMessage }}</p>
    </div>
  </div>
</template>

<script>
import WebSocket from 'websocket';

export default {
  data() {
    return {
      ws: null,
      connected: false,
      message: '',
      serverMessage: '',
    };
  },
  methods: {
    connect() {
      this.ws = new WebSocket('ws://localhost:8080');
      this.ws.onopen = () => {
        console.log('WebSocket连接已建立');
        this.connected = true;
      };
      this.ws.onmessage = (event) => {
        console.log('收到服务器消息：', event.data);
        this.serverMessage = event.data;
      };
      this.ws.onclose = () => {
        console.log('WebSocket连接已关闭');
        this.connected = false;
      };
    },
    sendMessage() {
      this.ws.send(this.message);
      this.message = '';
    },
  },
};
</script>

image.png

运行客户端之后

image.png

点击连接服务器之后可以看到

image.png

服务端也在做相应的响应

在上述示例中，我们使用ws包创建WebSocket服务器实例，并在连接建立、收到消息、连接关闭等事件中分别处理相应的逻辑。在Vue客户端中，我们使用websocket包创建WebSocket客户端实例，并在连接建立、收到消息、连接关闭等事件中分别处理相应的逻辑。通过这样的方式，我们就可以在Node.js服务端和Vue客户端之间建立WebSocket连接，并实现实时通信的功能。

附上html格式

下面是一个简单的HTML页面示例，展示了如何使用JavaScript和WebSocket库来实现客户端与服务端之间的通信：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket示例</title>
</head>
<body>
  <div>
    <button onclick="connect()">连接服务器</button>
    <div id="message-container" style="display: none;">
      <input id="message-input" placeholder="输入消息" />
      <button onclick="sendMessage()">发送消息</button>
      <p id="server-message"></p>
    </div>
  </div>

  <script>
    // 创建WebSocket实例
    const ws = new WebSocket('ws://localhost:8080');
    
    // 监听连接建立事件
    ws.addEventListener('open', () => {
      console.log('WebSocket连接已建立');
      document.getElementById('message-container').style.display = 'block';
    });
    
    // 监听收到服务器消息事件
    ws.addEventListener('message', (event) => {
      console.log('收到服务器消息：', event.data);
      document.getElementById('server-message').textContent = event.data;
    });
    
    // 监听连接关闭事件
    ws.addEventListener('close', () => {
      console.log('WebSocket连接已关闭');
      document.getElementById('message-container').style.display = 'none';
    });
    
    // 连接服务器
    function connect() {
      ws.connect();
    }
    
    // 发送消息
    function sendMessage() {
      const messageInput = document.getElementById('message-input');
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    }
  </script>
</body>
</html>
avatar
文章
阅读
粉丝