Nodejs WebSocket 连通 html 网页(简单案例)

一、简介

二、node 端基本部署

  • 在入口文件中写入调试即可。

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

    js 复制代码
    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 服务,也就是额外的接口路由服务,使用默认自带的:

    js 复制代码
    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 之类的库:

    js 复制代码
    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,线上记得根据实际情况进行更换调整。

    html 复制代码
    <!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>

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

相关推荐
jjw_zyfx34 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
梦想平凡2 小时前
三网通电玩城平台系统结构与源码工程详解(二):Node.js 服务端核心逻辑实现
node.js
傻小胖4 小时前
发布一个npm包,更新包,删除包
前端·npm·node.js
叱咤少帅(少帅)6 小时前
Node.js 开发项目
node.js
DN金猿8 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
layman05289 小时前
node.js 实战——(Http 知识点学习)
http·node.js
2501_915373889 小时前
Node.js 学习入门指南
学习·node.js
小厂永远得不到的男人10 小时前
基于 Trae 的 WebSocket 聊天室保姆级教程(超详细版)
websocket·全栈·trae
小厂永远得不到的男人12 小时前
WebSocket深度剖析:实时通信的终极解决方案实践指南
后端·websocket
遗憾随她而去.13 小时前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议