# websocket_demo

**Repository Path**: d-jj/websocket_demo

## Basic Information

- **Project Name**: websocket_demo
- **Description**: 简单的websocket示例代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-12
- **Last Updated**: 2024-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 1.1 什么是WebSocket

​	WebSocket是一种**协议**，用于**在Web应用程序和服务器之间建立实时、双向的通信连接**。它通过一个单一的**TCP**连接提供了持久化连接，这使得Web应用程序可以更加**实时地传递数据**。WebSocket协议最初由W3C开发，并于2011年成为标准。

#### 1.2 WebSocket生命周期

​	生命周期分为：**连接建立阶段**、**连接开放阶段**、**连接关闭阶段**、**连接关闭完成阶段**。

#### 1.3 WebSocket的消息格式

​	WebSocket 的消息格式与 HTTP 请求和响应的消息格式有所不同。WebSocket 的消息格式可以是文本或二进制数据，并且 WebSocket 消息的传输是在一个已经建立的连接上进行的，因此不需要再进行 HTTP 请求和响应的握手操作。

WebSocket 消息格式由两个部分组成：消息头和消息体。

消息头包含以下信息：

- **FIN：** 表示这是一条完整的消息，一般情况下都是1。
- **RSV1、RSV2、RSV3：** 暂时没有使用，一般都是0。
- **Opcode：** 表示消息的类型，包括文本消息、二进制消息等。
- **Mask：** 表示消息是否加密。
- **Payload length：** 表示消息体的长度。
- **Masking key：** 仅在消息需要加密时出现，用于对消息进行解密。

消息体就是实际传输的数据，可以是文本或二进制数据。

#### 1.4 使用WebSocket

​	WebSocket API 是用于在 Web 应用程序中创建和管理 WebSocket 连接的接口集合。WebSocket API 由浏览器原生支持，无需使用额外的 JavaScript 库或框架，可以直接在 JavaScript 中使用。

下面是一些常用的 WebSocket API：

**WebSocket 构造函数：** WebSocket 构造函数用于创建 WebSocket 对象。它接受一个 URL 作为参数，表示要连接的 WebSocket 服务器的地址。例如：

```javascript
let ws = new WebSocket('ws://example.com/ws');
```

**WebSocket.send() 方法：** `WebSocket.send()` 方法用于向服务器发送数据。它接受一个参数，表示要发送的数据。数据可以是字符串、Blob 对象或 ArrayBuffer 对象。例如：

```javascript
ws.send('Hello, server!');
```

**WebSocket.onopen 事件：** `WebSocket.onopen` 事件在 WebSocket 连接成功建立时触发。例如：

```javascript
ws.onopen = function() {
  console.log('WebSocket 连接已经建立。');
};
```

**WebSocket.onmessage 事件：** `WebSocket.onmessage` 事件在接收到服务器发送的消息时触发。它的 event 对象包含一个 data 属性，表示接收到的数据。例如：

```javascript
ws.onmessage = function(event) {
  console.log('收到服务器消息：', event.data);
};
```

**WebSocket.onerror 事件：** `WebSocket.onerror` 事件在 WebSocket 连接出现错误时触发。例如：

```javascript
ws.onerror = function(event) {
  console.error('WebSocket 连接出现错误：', event);
};
```

**WebSocket.onclose 事件：** `WebSocket.onclose` 事件在 WebSocket 连接被关闭时触发。例如：

```javascript
ws.onclose = function() {
  console.log('WebSocket 连接已经关闭。');
};
```

以上是一些常用的 WebSocket API。



#### 1.5 测试用例

​	index.html

```javascript
 <button onclick="sendData()">测试发送数据</button>
```

​	sendData函数

```javascript
function sendData() {
            ws.send("这是发送给后台的消息");
        }
```

创建websocket

```javascript
let ws = new WebSocket("http://localhost:3000");
      ws.onopen = function () {
        console.log("连接成功");
      };
      ws.onmessage = function (msg) {
        console.log(msg.data);
      };
      ws.onerror = function () {
        console.log("连接出错");
      };
      ws.onclose = function () {
        console.log("连接关闭");
      };
```

​	**后台接口**

安装express、 ws

```shell
npm install express
```

```shell
npm install ws
```

完整代码

```javascript
const express = require("express");
const http = require("http");
const webSocket = require("ws");
const app = express();
const server = http.createServer(app);
const wss = new webSocket.Server({ server });
//webSocket服务器
wss.on("connection", function (ws) {
  console.log("连接成功");
  ws.on("message", function (msg) {
    //处理收到的信息
    const buffer = Buffer.from(msg)
    const text = buffer.toString('utf-8')
    console.log(text)
  });
  ws.on("close", function () {
    console.log("连接关闭");
  });
  ws.on("error", function () {
    console.log("连接错误");
  });
});
app.get("/", function (req, res) {
  res.send("hello world");
});
server.listen(3000, function () {
  console.log("服务器运行在 http://localhost:3000");
});

```