WebSocket 【实用教程】-阿里云开发者社区

WebSocket 【实用教程】

2024-07-04 71

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： WebSocket 【实用教程】

WebSocket简介

WebSocket是一种网络传输协议，可在单个TCP连接上进行全双工通信，位于OSI模型的应用层。

特点

TCP连接，与HTTP协议兼容
双向通信，主动推送(服务端向客户端)
无同源限制，协议标识符是ws( 加密wss)

应用场景

聊天，消息，点赞
直播弹幕、评论
游戏、协同编辑、基于位置的应用

前端库

【推荐】ws(实现原生协议，特点: 通用、性能高，定制性强)
socket.io(向下兼容协议，特点:适配性强、性能一般

创建 WebSocket 服务端

新建文件夹 server，终端运行

cnpm init -y

初始化项目

安装 ws 库

cnpm i -S ws

新建项目启动文件 server\index.js

const WebSocket = require("ws");
// 在指定端口上，创建WebSocket服务
const wss = new WebSocket.Server({ port: 3001 });
// 客户端连接到服务器的回调
wss.on("connection", function connection(ws) {
  console.log("一个客户端已连接");
  // 服务端接收客户端的消息
  ws.on("message", function (msg) {
    console.log("服务端接收到来自客户端的消息：" + msg);
  });
  // 服务端发消息给客户端
  ws.send("你好，客户端，我是服务端！");
});

启动项目

node server/index.js

创建 WebSocket 客户端

方法1：使用原生WebSocket

在html的js中执行

var ws = new WebSocket("ws://127.0.0.1:3001");

即可与WebSocket服务器建立连接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 与服务端建立WebSocket长连接
      var ws = new WebSocket("ws://127.0.0.1:3001");
      // 客户端发送消息给服务端
      ws.onopen = function () {
        ws.send("你好，服务端，我是客户端！");
      };
      // 客户端接收到服务端的消息
      ws.onmessage = function (event) {
        console.log(event.data);
      };
    </script>
  </body>
</html>

方法2：使用ws

新建文件夹 client，终端运行

cnpm init -y

初始化项目

安装 ws 库

cnpm i -S ws

新建项目启动文件 client\index.js

// 导入ws库
const WebSocket = require("ws");
// 与服务端建立WebSocket长连接
const ws = new WebSocket("ws://127.0.0.1:3001");
ws.on("open", function () {
  console.log("node客户端成功连接到服务器");
  // 客户端发送消息给服务端
  ws.send("你好，服务端，我是node客户端！");
  // 客户端接收到服务端的消息
  ws.on("message", function (msg) {
    console.log("node客户端接收到服务端的消息：" + msg);
  });
});