WebSocket学习(三)——使用nodejs搭建WebSocket服务器

最新推荐文章于 2025-06-16 14:08:54 发布

原创最新推荐文章于 2025-06-16 14:08:54 发布 · 1.3w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#WebSocket

webSocket 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Node.js创建一个WebSocket服务器。通过安装WebSocket模块并编写服务器代码，可以实现客户端与服务器之间的双向通信。示例代码展示了如何设置监听事件及处理客户端发送的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

我有篇文章讲了下用nodejs搭建http服务器（关联文章）

下面讲下用nodejs搭建WebSocket服务器

1、首先用cmd打开控制台输入npm install websocket

2、编写一个wsServer.js文件

// 引入WebSocket模块
var ws = require('nodejs-websocket')
var PORT = 3000

// on就是addListener，添加一个监听事件调用回调函数
// Scream server example:"hi"->"HI!!!",服务器把字母大写
var server = ws.createServer(function(conn){
    console.log('New connection')
    conn.on("text",function(str){
        console.log("Received"+str)
        // conn.sendText(str.toUpperCase()+"!!!") //大写收到的数据
        conn.sendText(str)  //收到直接发回去
    })
    conn.on("close",function(code,reason){
        console.log("connection closed")
    })
    conn.on("error",function(err){
        console.log("handle err")
        console.log(err)
    })
}).listen(PORT)

console.log('websocket server listening on port ' + PORT)

这个服务器实现了把客户端传入的小写字母转换为大写

如注释，先要引入WebSocket模块，然后创建一个服务，并为其添加一个监听，其中自带了一些事件的监听，如text、close、error，用sendText（）发送数据

通过从cmd用node wsSocket启动服务器

3、前台界面编写

在之前WebSocket学习(二)——使用官方的服务器实现WebSocket的基础上改动一点

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket</title>
</head>
<body>
    <h1>Echo Test</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        // //官方示例的服务器
        // var WebSocket = new WebSocket("ws://echo.websocket.org");
        // wsServer搭建的服务器
        var WebSocket = new WebSocket("ws://localhost:3000/");
        WebSocket.onopen = function(){
            console.log('websocket open');
            document.getElementById("recv").innerHTML = "Connected";
        }
        WebSocket.onclose = function(){
            console.log('websocket close');
        }
        WebSocket.onmessage = function(e){
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;
        }
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;
            WebSocket.send(txt);
        }
    </script>
</body>
</html>

可以看到把服务器的地址改为本机了