1. Python技术站首页
  2. node js

JavaScript之WebSocket技术详解

• node js

JavaScript之WebSocket技术详解

什么是WebSocket？

WebSocket 是一种HTML5的协议，它是一种在浏览器和服务器之间进行实时双向通讯的技术，可以像TCP一样进行全双工通讯。

WebSocket 协议与 http 协议兼容，使用与 http 相同的端口，一般是 80 和 443 端口。

和传统的 http 请求不同，WebSocket 启动时需要进行一次握手。而在握手成功之后，WebSocket 就可以和服务器进行双向通信，以非常低的延迟和较小的网络带宽实现数据传输。

WebSocket 的优点

  • 实时性更好：WebSocket 可以实现实时通信，客户端和服务器可以实时地相互发送数据。
  • 节约流量：WebSocket 的握手报文和响应报文很小，可以减少不必要的网络负担。
  • 更好的性能：在 server 端只需要维护一个长连接，可以节省开销，提高性能。

如何使用WebSocket

在 JavaScript 中，我们可以通过 WebSocket 对象创建 WebSocket 连接。

const webSocket = new WebSocket(url, [protocols]);

其中，url 是连接的地址，protocols 是可选参数，表示 WebSocket 子协议名称，是一个字符串或者字符串数组。

接下来，我们通过一个示例来说明 WebSocket 的使用过程：

// 创建一个 WebSocket 连接
const ws = new WebSocket('ws://localhost:8000');

// 连接成功时的回调函数
ws.onopen = function(event) {
  console.log('WebSocket 连接成功!');
};

// 接收到服务器发送的消息时的回调函数
ws.onmessage = function(event) {
  console.log('接收到服务器的消息: ', event.data);
};

// 连接关闭时的回调函数
ws.onclose = function(event) {
  console.log('WebSocket 连接关闭!');
};

// 发送消息到服务器
ws.send('Hello, WebSocket!');

以上代码实现了向服务器发送一条消息，并在连接成功、接收到消息和连接关闭时分别输出信息。

在上述代码中，通过 new WebSocket(url) 创建了一个 WebSocket 连接。接下来，通过 onopen 、 onmessage 和 onclose 分别指定了连接成功、接收到消息和连接关闭时的回调函数。

最后，通过 send 方法向服务器发送消息。

WebSocket 的应用场景

由于 WebSocket 可以实现实时通信、减少网络负载、提高程序性能等优点，所以在以下场景中常被使用：

  • 在线游戏：WebSocket 可以实时地将游戏数据传输到客户端，让游戏玩家能够实时感受到游戏中的各种操作。
  • 在线聊天室：WebSocket 能够实时地将每个用户的消息推送给其他用户，让聊天室的每个人都能实时地收到其他用户的信息。
  • 实时数据展示：如股票、气象等数据，可以通过 WebSocket 实时地推送到客户端进行展示等。

示例一：实现在线聊天室

下面通过一个在线聊天室的示例来说明 WebSocket 的使用。示例中我们使用 Node.js 的 ws 模块作为服务器实现，同时使用 WebSocket 对象作为客户端实现。

服务器实现

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8000 });

wss.on('connection', function(ws) {
  console.log('WebSocket 连接成功!');

  // 监听客户端发来的消息
  ws.on('message', function(msg) {
    console.log('接收到客户端的消息: ', msg);

    // 将消息发送给所有连接的客户端
    wss.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(msg);
      }
    });
  });

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

以上代码使用 WebSocket.Server 对象创建 WebSocket 服务器，并监听客户端连接成功、收到消息和连接关闭等事件。

在收到客户端发送的消息时，服务器先将消息输出到控制台，然后通过 wss.clients.forEach() 将消息发送给所有连接的客户端。

客户端实现

// 创建一个 WebSocket 连接
const ws = new WebSocket('ws://localhost:8000');

// 连接成功时的回调函数
ws.onopen = function(event) {
  console.log('WebSocket 连接成功!');

  // 发送消息到服务器
  ws.send('欢迎加入聊天室!');
};

// 接收到服务器发送的消息时的回调函数
ws.onmessage = function(event) {
  console.log('接收到服务器的消息: ', event.data);

  // 将消息添加到页面中
  const msgEle = document.createElement('div');
  msgEle.innerText = `[${new Date().toLocaleTimeString()}] ${event.data}`;
  document.body.appendChild(msgEle);
};

// 连接关闭时的回调函数
ws.onclose = function(event) {
  console.log('WebSocket 连接关闭!');
};

以上代码使用 new WebSocket(url) 创建一个 WebSocket 连接，并指定连接成功、接收到消息和连接关闭时的回调函数。

在连接成功后，客户端向服务器发送一条欢迎信息，并将服务器回复的消息添加到页面中展示。

示例二：通讯录实时在线编辑

WebSocket 还可以用于通讯录等在线编辑应用场景，可以做到实时地将修改推送到其他客户端。下面我们通过一个示例来说明。

服务器实现

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8000 });

// 通讯录数据
let addressBook = [
  { name: '张三', phone: '13912345678' },
  { name: '李四', phone: '13812345678' },
  { name: '王五', phone: '13712345678' },
];

wss.on('connection', function(ws) {
  console.log('WebSocket 连接成功!');

  // 发送通讯录数据给客户端
  ws.send(JSON.stringify(addressBook));

  // 监听客户端发来的消息
  ws.on('message', function(msg) {
    console.log('接收到客户端的消息: ', msg);

    // 解析客户端发送的消息
    const data = JSON.parse(msg);

    // 根据消息类型进行不同的处理
    switch (data.type) {
      case 'add':
        // 添加联系人
        addressBook.push(data.data);
        break;
      case 'edit':
        // 编辑联系人
        const contact = addressBook.find(function(item) {
          return item.name === data.data.name;
        });

        if (contact) {
          contact.phone = data.data.phone;
        }
        break;
      case 'delete':
        // 删除联系人
        addressBook = addressBook.filter(function(item) {
          return item.name !== data.data.name;
        });
        break;
    }

    // 将更新后的通讯录数据发送给所有客户端
    wss.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(addressBook));
      }
    });
  });

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

以上代码使用 WebSocket.Server 对象创建 WebSocket 服务器，并监听客户端连接成功、收到消息和连接关闭等事件。

在收到客户端发送的消息时，服务器先解析消息中的类型和数据，然后根据消息类型进行不同的处理。处理完成之后，服务器将更新后的通讯录数据发送给所有连接的客户端。

客户端实现

// 创建一个 WebSocket 连接
const ws = new WebSocket('ws://localhost:8000');

// 连接成功时的回调函数
ws.onopen = function(event) {
  console.log('WebSocket 连接成功!');
};

// 接收到服务器发送的消息时的回调函数
ws.onmessage = function(event) {
  console.log('接收到服务器的消息: ', event.data);

  // 将更新后的通讯录数据添加到页面中
  const addressBookEle = document.getElementById('addressbook');
  addressBookEle.innerHTML = '';
  JSON.parse(event.data).forEach(function(contact) {
    const row = `
      <tr>
        <td>${contact.name}</td>
        <td>${contact.phone}</td>
      </tr>
    `;
    addressBookEle.innerHTML += row;
  });
};

// 连接关闭时的回调函数
ws.onclose = function(event) {
  console.log('WebSocket 连接关闭!');
};

// 添加联系人
function addContact() {
  const name = document.getElementById('name').value;
  const phone = document.getElementById('phone').value;
  if (name && phone) {
    const data = { type: 'add', data: { name: name, phone: phone } };
    ws.send(JSON.stringify(data));
    document.getElementById('name').value = '';
    document.getElementById('phone').value = '';
  }
}

// 编辑联系人
function editContact() {
  const name = document.getElementById('name').value;
  const phone = document.getElementById('phone').value;
  if (name && phone) {
    const data = { type: 'edit', data: { name: name, phone: phone } };
    ws.send(JSON.stringify(data));
    document.getElementById('name').value = '';
    document.getElementById('phone').value = '';
  }
}

// 删除联系人
function deleteContact() {
  const name = document.getElementById('name').value;
  if (name) {
    const data = { type: 'delete', data: { name: name } };
    ws.send(JSON.stringify(data));
    document.getElementById('name').value = '';
    document.getElementById('phone').value = '';
  }
}

以上代码使用 new WebSocket(url) 创建一个 WebSocket 连接，并指定连接成功、接收到消息和连接关闭时的回调函数。

在收到服务器发送的消息时，客户端将更新后的通讯录数据添加到页面中展示。

此外，客户端还提供了添加联系人、编辑联系人和删除联系人等操作，通过构造不同类型的消息，并使用 ws.send() 发送到服务器进行处理。

总结

WebSocket 技术可以在客户端和服务器之间实现实时双向通讯，具有实时性、节约流量和更好的性能等优点，适用于在线游戏、在线聊天室、实时数据展示等场景。

我们通过两个示例分别实现了在线聊天室和通讯录在线编辑功能，充分说明了 WebSocket 技术的应用场景和具体实现方式。

在实际项目中，我们可以根据具体需求灵活使用 WebSocket 技术，提升用户体验和产品性能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript之WebSocket技术详解 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • nodejs中函数的调用实例详解

    下面我将为大家详细讲解“Node.js中函数的调用实例详解”。 什么是函数 首先，我们需要了解什么是函数。在JavaScript（和Node.js）中，函数是一段可重用的代码，它们提供了一种封装代码的方式，可以接受参数，可以返回值也可以不返回值。函数的调用必须使用函数名和一对括号。 下面是一个简单的函数示例： function add(a, b) { ret…

    node js 2023年6月8日
    00

  • nodejs+mysql实现用户相关的增删改查的详细操作

    首先，为了实现nodejs+mysql实现用户相关的增删改查，我们需要先安装以下两个模块： mysql模块：用于连接MySQL数据库，并执行相应的查询、新增、修改、删除操作 express框架：用于搭建web服务器 具体实现步骤如下： 步骤一：安装必备模块 在命令行窗口（终端）执行以下命令： npm install mysql express –save …

    node js 2023年6月8日
    00

  • promise和co搭配生成器函数方式解决js代码异步流程的比较

    使用Promise和co搭配生成器函数方式是一种优雅简洁地处理JavaScript异步流程的方法。下面我们将详细讲解如何使用Promise和co搭配生成器函数的方式解决异步流程的问题，并提供两个示例说明。 Promise Promise是一种在JavaScript中处理异步操作的标准方法，它能够帮助我们减少大量的回调函数。Promise可以让我们的代码更加可…

    node js 2023年6月8日
    00

  • 微信中一些常用的js方法汇总

    微信中一些常用的JS方法汇总 本文将介绍一些在微信开发中常用的JS方法，内容包括微信JS-SDK的使用、微信支付的相关JS方法以及微信浏览器中特有的JSAPI等。 微信JS-SDK 微信JS-SDK是微信公众号提供给开发者的一组开发工具包，使用微信JS-SDK可以轻松地在网页中调用微信JS-SDK提供的接口，例如分享、扫一扫等功能。 1. 引入JS文件 在需…

    node js 2023年6月8日
    00

  • JS创建Tag标签的方法详解

    下面是针对“JS创建Tag标签的方法详解”的完整攻略。 1. document.createElement()方法 JavaScript中提供了 document.createElement() 方法，可以通过该方法创建指定的HTML标签元素。 语法格式如下： document.createElement(tagName); 其中 tagName 是字符串类…

    node js 2023年6月8日
    00

  • 详解使用Nodejs内置加密模块实现对等加密与解密

    下面是详解使用Nodejs内置加密模块实现对等加密与解密的完整攻略。 什么是对等加密？ 对等加密，又称对称加密算法，是一种加密与解密使用相同密钥的加密方式。这种加密方式速度快，适用于数据较小的场合。在这种加密方式下，密钥的安全性极为重要，一旦被泄漏可能会导致加密数据不安全。 使用Nodejs内置加密模块实现对等加密 Nodejs中提供了crypto模块，其中…

    node js 2023年6月8日
    00

  • 利用Node.js检测端口是否被占用的方法

    当我们要在Node.js中搭建服务时，常常会遇到端口被占用的问题，比如在调试时想要使用某个端口，但是发现该端口已被占用，这时我们就需要知道如何检测端口是否被占用。下面我将给出一个检测端口是否被占用的方法的攻略。 方法一：利用net模块检测 Node.js的内置模块net提供了一个API，可以用来检测端口是否被占用，具体代码如下所示： const net = …

    node js 2023年6月8日
    00

  • 浅谈JS和Nodejs中的事件驱动

    浅谈JS和Nodejs中的事件驱动 什么是事件驱动 事件驱动编程是一种编程模型，它是通过监听事件，而不是等待结果来实现异步响应的。在事件驱动编程中，当某个事件发生时，与该事件相关的函数会被自动调用，从而达到所需的处理效果。 JS中事件驱动 在JS中，事件可以是用户操作，如鼠标点击、键盘输入等，也可以是浏览器定义的事件，如文件加载、超链接点击等。JS通过add…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部