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

JavaScript之WebSocket技术详解

• node js
yizhihongxing

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日

相关文章

  • 学习使用grunt来打包JavaScript和CSS程序的教程

    学习使用grunt来打包JavaScript和CSS的教程可以分为以下几步： 1. 安装Node.js和Grunt 首先需要安装Node.js，可以到官网下载对应操作系统的安装包，然后按照提示安装即可。安装完Node.js之后，可以使用npm命令行工具来安装Grunt，命令为： npm install -g grunt-cli 这个命令会安装一个全局的gru…

    node js 2023年6月8日
    00

  • nodejs简单访问及操作mysql数据库的方法示例

    针对“nodejs简单访问及操作mysql数据库的方法示例”的攻略，可以分为以下几个步骤： 1. 安装 mysql 和 mysql2 包 首先需要在项目中安装 mysql 和 mysql2 包，这两个包可以通过 npm 进行安装。 npm install mysql mysql2 –save 这里需要注意的是，mysql2 是 mysql 的升级版，性能更…

    node js 2023年6月9日
    00

  • js 将canvas生成图片保存,或直接保存一张图片的实现方法

    使用 canvas.toDataURL() 将 canvas 保存为 base64 编码的图片，然后通过一个链接或者表单向服务器提交该图片以保存。 首先，我们需要获取 canvas 元素的 2d 上下文对象，然后使用 ctx.drawImage() 函数绘制一些元素到 canvas 上。如果你需要保存整个 canvas，可以使用以下代码： const can…

    node js 2023年6月8日
    00

  • Docker部署Node.js的方法步骤

    下面是Docker部署Node.js的方法步骤的完整攻略。 准备工作 安装 Docker 环境 安装 Node.js 环境 编写 Node.js 应用代码 使用 npm 初始化项目 编写 Dockerfile 文件 Dockerfile 文件用于构建 Docker 镜像，以下是一个简单的 Node.js 镜像的 Dockerfile 文件： FROM nod…

    node js 2023年6月8日
    00

  • 使用ThinkJs搭建微信中控服务的实现方法

    使用ThinkJs搭建微信中控服务的实现方法 ThinkJs是一个快速、简单而又强大的Node.js框架，使用它可以很快地搭建Web应用。本攻略将介绍如何使用ThinkJs来搭建微信中控服务，包括对接微信公众号服务器、处理微信公众号消息等。 创建项目 首先，我们需要安装ThinkJs，可以通过npm来安装： npm install -g think-cli …

    node js 2023年6月8日
    00

  • Node.js模块Modules的使用实战教程

    Node.js模块的使用实战教程如下： 1. 模块的引入 在Node.js中，我们使用require函数来引入模块。引入的模块可以是我们自己编写的模块，也可以是已经安装好的第三方模块。以下是引入模块的代码： const moduleName = require(‘module-name’) 其中，moduleName为引入的模块名。在require函数中传入…

    node js 2023年6月8日
    00

  • nodejs判断文件、文件夹是否存在及删除的方法

    Node.js判断文件、文件夹是否存在及删除的方法 在Node.js中，判断文件和文件夹是否存在，以及删除文件和文件夹是非常常见的操作。接下来我们将详细介绍如何使用Node.js来实现这些操作。 判断文件是否存在 判断文件是否存在，我们可以使用Node.js提供的fs模块中的access()方法。该方法用来测试是否能够以读写方式打开文件。 代码示例： con…

    node js 2023年6月8日
    00

  • 详解为什么Vue中不要用index作为key(diff算法)

    为什么Vue中不要用index作为key(diff算法) Vue.js是一个数据驱动的框架，通过比对虚拟dom树上的新旧节点来更新DOM，将整数型索引作为v-for列表渲染的key，这会在某些场景下对diff算法的性能产生负面影响。 在Vue.js中如果我们用没有唯一标识的索引作为v-for循环渲染的key，可能会导致以下问题： 内部状态丢失，导致数据混乱：…

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