使用 WebSocket 实现最简单应用WebSocket在日常网络开发者非常常见，WebSocket是应用层协议，也是

人的精神思想方面的优势越大，给无聊留下的空间就越小。 --人生的智慧

WebSocket在日常网络开发者非常常见，WebSocket是应用层协议，也是一种在单个TCP连接上进行全双工通信的协议。它实现了浏览器与服务器之间的全双工通信，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

WebSocket协议基于TCP协议，是一个持久化的协议。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

下面来构建一个最简单的 WebSocket 应用来了解一下WebSocket协议

准备

创建一个空白文件夹，然后执行npm init -y，构建工程

依赖

这里面需要 node 环境，以及安装WebSocket 依赖，使用npm install ws安装 WebSocket 依赖，

客户端

创建 client.html 文件，作为客户端展示页面和逻辑处理页面

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>websocket测试</title>
  </head>

  <body>
    <div id="res">当前客户端还没有连接到websocket服务器</div>
    <button onclick="sendMessage()">发消息给服务器</button>
    <button onclick="closeWebSocket()">关闭websocket</button>
    <button onclick="openWebSocket()">开启连接open后客户端处理方法</button>
  </body>

</html>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
<script type="text/javascript">
  // 打开一个 web socket，设定websocket服务器地址和端口
  const ws = new WebSocket("ws://127.0.0.1:8888/");

  //开启连接open后客户端处理方法
  ws.onopen = function (event) {
    // Web Socket 已连接上，在页面中显示消息
    document.getElementById('res').innerHTML = "当前客户端已经连接到websocket服务器";
    console.log('websocket已连接')

  };

  // 接收消息后客户端处理方法
  ws.onmessage = function (event) {
    //接收到服务端的消息后，输出打印收到消息的内容
    console.log('收到服务端回复的消息：' + event.data);
    //   $('#res').text(evt.data);
  };

  // 关闭websocket
  ws.onclose = function (event) {
    document.getElementById('res').innerHTML = "当前客户端还没有连接到websocket服务器";
    // 关闭 websocket
    alert("连接已关闭...");
  };

  // 监听连接错误事件
  ws.onerror = function (error) {
    console.error('WebSocket连接发生错误:', error);
  };
  // 点击按钮时给websocket服务器端发送消息
  function sendMessage() {
    ws.send("hello server, I am client")
  }

  function closeWebSocket() {
    ws.close();
  }
  /**
     *  注意此方法会报错
     *  因为websocket连接需要手动指定服务器地址和端口
     *  所以此方法会报错
     *  正确的打开连接方法是：
     *   const ws = new WebSocket("ws://127.0.0.1:8888/");并指定onopen、onmessage等方法
     */
  // function openWebSocket() {
  //     ws.open();
  // }

</script>

这里核心代码是 const ws = new WebSocket("ws://127.0.0.1:8888/");创建一个 web socket 然后设定服务器地址和端口，然后使用onopen、onmessage等方法监听事件，可以使用ws.send、ws.close 等方法发送命令、关闭链接，

注意：WebSocket连接通常是持久的，除非手动关闭或发生错误，否则连接会一直保持。因此，在大多数情况下，我们不需要手动关闭WebSocket连接，因为它们会在不再需要时自动关闭。

服务端

创建 server.js 文件,存放服务端逻辑处理代码

const http = require('http');
const websocket = require('ws');

// 创建http服务器
const server = http.createServer();
// 创建websocket服务器，将http服务器作为参数传入
const wss = new websocket.Server({ server });

// 绑定连接事件，当有新连接建立时执行
wss.on('connection', (socket) => {
  console.log('websocket已连接');
  // 监听客户端发来的消息事件
  socket.on('message', (message) => {
    // 打印收到的消息
    console.log('收到客户端发来的消息：' + message);
    // 将消息返回给客户端
    socket.send('hello client, I am server, I received')
  });
  // 监听客户端连接关闭事件
  socket.on('close', () => {
    console.log('websocket连接已关闭');
  });
});

// 监听http服务器的请求事件
server.on('request', (request, response) => {
  // 发送响应给客户端
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello,world1111!');
});

// 启动http服务器，监听8888端口
server.listen(8888, () => {
  console.log('服务已启动，端口号为8888');
});