Nodejs WebSocket 连通 html 网页（简单案例）

最新推荐文章于 2025-01-05 08:16:16 发布

前端77

最新推荐文章于 2025-01-05 08:16:16 发布

阅读量765

点赞数 14

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/gaotlantis/article/details/144246807

版权

一、简介

附：# Nodejs Express.js 快速入门（详细流程）
nodejs 端安装 WebSocket
```
$ npm install ws
```
二、node 端基本部署
在入口文件中写入调试即可。

简单版本，只想让 WebSocket 服务器单独运行，可以直接创建一个 WebSocket 服务器，不需要传入 server 对象。

const WebSocket = require('ws');

// 创建 WebSocket 服务器，不传入 HTTP 服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听客户端连接
wss.on('connection', (ws) => {
  console.log('A new client connected!');

  // 监听客户端消息
  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 向客户端发送响应
    ws.send('Message received');
  });

  // 向客户端发送初始欢迎消息
  ws.send('Welcome to the WebSocket server!');
});

console.log('WebSocket server is running on ws://localhost:8080');

需要支持 http 服务，也就是额外的接口路由服务，使用默认自带的：

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

// 创建一个 HTTP 服务器，托管静态文件
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>WebSocket Server Running</h1>');
});

// 创建 WebSocket 服务器，并将其绑定到 HTTP 服务器
// 这样就可以将 WebSocket 与 server.listen 绑定为一个端口
const wss = new WebSocket.Server({ server });

// 监听客户端连接
wss.on('connection', (ws) => {
  console.log('A new client connected!');

  // 监听来自客户端的消息
  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 向客户端发送响应
    ws.send('Message received');
  });

  // 向客户端发送初始欢迎消息
  ws.send('Welcome to the WebSocket server!');
});

// 启动 HTTP 服务器并监听端口
server.listen(8080, () => {
  console.log('Server is running at http://localhost:8080');
});

还有就是使用第三方库，例如 express 之类的库：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

// 创建 Express 应用
const app = express();

// 创建 HTTP 服务器并将其与 Express 连接
const server = http.createServer(app);

// 创建 WebSocket 服务器，并将其绑定到现有的 HTTP 服务器
const wss = new WebSocket.Server({ server });

// 监听 WebSocket 客户端连接
wss.on('connection', (ws) => {
  console.log('A new client connected!');

  // 监听客户端发送的消息
  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // 向客户端发送响应
    ws.send('Message received');
  });

  // 向客户端发送初始欢迎消息
  ws.send('Welcome to the WebSocket server!');
});

// 在 Express 中定义一些 HTTP 路由
app.get('/', (req, res) => {
  res.send('<h1>Hello from Express</h1>');
});

// 启动 HTTP 和 WebSocket 服务器
server.listen(8080, () => {
  console.log('Server running at http://localhost:8080');
});

选择自己的一种方式配置好后，运行 node 项目即可。

三、客户端基本部署

在现代浏览器中，WebSocket 是原生支持的，不需要引入额外的 CDN 或第三方库。因此，可以直接在客户端的 JavaScript 代码中使用 WebSocket 对象，无需额外的外部依赖。
直接创建一个 index.html 网页，写入代码打开即可，本地用的是 localhost，线上记得根据实际情况进行更换调整。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Client</title>
</head>
<body>
  <h1>WebSocket Test</h1>
  <button id="sendBtn">Send Message to Server</button>
  <div id="response"></div>

  <script>
    // 创建 WebSocket 连接到 Node.js WebSocket 服务器
    const socket = new WebSocket('ws://localhost:8080');

    // 打开连接时的回调
    socket.addEventListener('open', () => {
      console.log('Connected to WebSocket server');
      socket.send('Hello, server!');
    });

    // 监听来自服务器的消息
    socket.addEventListener('message', (event) => {
      const responseDiv = document.getElementById('response');
      responseDiv.textContent = 'Server says: ' + event.data;
      console.log('Message from server: ' + event.data);
    });

    // 监听连接关闭事件
    socket.addEventListener('close', () => {
      console.log('Connection closed');
    });

    // 监听连接错误事件
    socket.addEventListener('error', (error) => {
      console.error('WebSocket Error: ' + error);
    });

    // 发送消息到服务器按钮
    const sendBtn = document.getElementById('sendBtn');
    sendBtn.addEventListener('click', () => {
      socket.send('Sending message from client');
    });
  </script>
</body>
</html>

这样就接通了，就可以根据规则进行使用了。