nodejs搭建websocket服务器

2021-09-18 17:41:37

» 介绍

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

用 nodejs 简单的搭建 websocket 服务实现多页面通信，效果如下：
请添加图片描述

» nodejs搭建websocket服务

新建文件夹 websocket
执行 npm init -y 初始化项目
执行 npm i ws 安装 ws 依赖
新建 server.js 文件
执行 node server.js 启动服务

// server.js
let WebSocketServer = require("ws").Server;
let wss = new WebSocketServer({ port: 3000 });
let clients = []; // 已连接的客户端

wss.on("connection", function(client) {
  console.log("一个客户端连接成功");
  if (clients.indexOf(client) === -1) {
    clients.push(client);
    client.on("message", function(msg) {
      console.log("收到客户端消息：" + msg);
      for (let c of clients) {
        // 发送给其它客户端
        if (c != client) c.send(msg);
      }
    });
  }
});

» 客户端发送消息页面

<body>
<input type="text" id="text">
<button id="send">发送</button>
<script>
    // 建立websocket连接
    let ws = new WebSocket("ws://localhost:3000")
    send.onclick = function () {
        let msg = document.getElementById("text").value?.trim()
        if (msg)
            ws.send(msg)
    }
</script>
</body>

» 客户端接收消息页面

<body>
收到了消息：<span id="text"></span>
<script>
    let ws = new WebSocket("ws://localhost:3000")
    ws.onopen = function () {
        console.log('连接成功')
    }
    ws.onmessage = function (e) {
        // 获取到的e.data为blob二进制文件，用fileReader转成文本
        if (typeof (e.data) === 'string') {
            document.getElementById("text").innerHTML = e.data;
        } else {
            let reader = new FileReader();
            reader.readAsText(e.data);
            reader.onload = function () {
                let content = reader.result + '';
                document.getElementById("text").innerHTML = content;
            };
        }
    }
    ws.onclose = function () {
        console.log('断开连接')
    };
    ws.onerror = function () {
        console.log('连接失败')
    };
</script>
</body>

至此，页面1发送消息后，页面2就能响应消息，完成即时通讯。

websocket控制台输出：

在这里插入图片描述

WebSocket简介：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

node.js

更多相关内容

用nodejs搭建websocket服务器
2020-12-23 07:55:25

ws：是nodejs的一个WebSocket库，可以用来创建服务。 https://github.com/websockets/ws 3.server.js 在项目里面新建一个server.js，创建服务，指定8181端口，将收到的消息log出来。 var WebSocketServer = ...

收起
【linux环境搭建】使用nodejs搭建websocket服务器
千次阅读 2022-03-04 19:22:23
在腾讯云服务器上使用nodejs搭建websocket服务器
文章目录

1 前言
2 准备工作
2.1 安装nodejs
2.2 安装npm

3 打开端口
4 编写websocket服务端——js
4.1 测试websocket服务端

5 编写wesocket客户端——html
6 查看端口使用情况
7 运行结果
8 遇到的问题
1 前言

在腾讯云服务器上使用nodejs搭建websocket服务器。

2 准备工作

2.1 安装nodejs

安装环境
sudo apt install nodejs

执行whereis nodejs
找到bin文件路径

bin文件路径如下

在etc/profile中添加环境

2.2 安装npm

sudo apt install npm
sudo npm install ws
sudo npm install forever

3 打开端口

在腾讯云防火墙中添加3001的端口

4 编写websocket服务端——js

我是在date目录下创建了nodejs文件夹，然后将编写js文件，存为demo.js
代码来源：websocket 学习–简单使用，nodejs搭建websocket服务器，到模拟股票，到实现聊天室

demo.js
```
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 3001});
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
		ws.send("服务端接收到请求后，发送给客户端的数据");
    });
	
});
```
注意使用的端口和设定的一致。

然后执行命令运行，可以使用forever去运行js

forever start demo.js

注意js可能需要路径，看你当前在哪个目录下。

4.1 测试websocket服务端

http://oktools.net/websocket
这个网址可以测试你的websocket服务端是否可以被连接。

5 编写wesocket客户端——html

安装apach2，搭建web服务器
在var/www/html目录下编写需要的html文件

其中index.html是你的服务器的公网ip访问的网址
我编写的在test目录下

所以我的访问网址是

http://your_public_ip/test/websocket_test.html

需要输入你的公网ip代替your_public_ip

代码来源：websocket简介,nodejs做服务端的websocket,用nodejs实现websocket和socket_io整合的server端与client端
注意要填写代码中的"ws://公网ip:端口"
```
<html>
<head>
    <meta charset="utf-8"/>
    <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://公网ip:端口");
        websocket.onopen = function(){
            console.log('websocket open');
            document.getElementById('recv').innerHTML = 'Connected';
        }

        websocket.onclose = function(){
            console.log('websocket close');
        }

        websocket.onmessage = function(event){
            console.log(event.data);
            document.getElementById('recv').innerHTML = event.data;
        }

        document.getElementById('sendBtn').onclick = function(){
            var txt = document.getElementById('sendTxt').value;
            websocket.send(txt);

        }
    </script>
</body>
</html>
```
最终呈现的是如下画面

6 查看端口使用情况

lsof -i:3001

如图可以看到第一个作为监听，以及第二个是网页。
你可以尝试用http://oktools.net/websocket连通后再查看，会多出来一个。

7 运行结果

在你的客户端输入aaa，查看console。

8 遇到的问题

Error: listen EADDRNOTAVAIL: address not available
未连通，可以看看你的防火墙是否打开
收起
展开全文
nodejs-websocket 基于node创建websocket服务器
2020-04-21 17:18:21

nodejs-websocket 基于node创建websocket服务器 websocket 协议和 http 协议类似，http 协议有一个缺陷，只能由客户方端发起请求，服务端根据请求 url 和传过去的参数返回对应结果 websocket 是双向通信的，只要 ...

收起

websocket 学习--简单使用，nodejs搭建websocket服务器，到模拟股票，到实现聊天室

千次阅读 2019-04-16 15:59:29

websocket简介： WebSocket协议是HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议。它允许服务器主动发送信息给客户端。和http协议的不同？？ HTTP 协议是一种无状态的、无连接的、单向的...

websocket简介：

WebSocket协议是 HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议。它允许服务器主动发送信息给客户端。

和http协议的不同？？

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。而这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。

简单的说，WebSocket协议之前，实现双工通信就是通过不停发送HTTP请求（长轮询，使用 Ajax 轮询技术，轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求），从服务器拉取更新来实现，这导致了效率低下，浪费带宽资源，WebSocket解决了这个问题。

WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

websocket如何工作？？

在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为"握手" 。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。第一个参数 url, 指定连接的 URL。而URL参数需要以WS://或者WSS://开头，例如：ws://www.websocket.org，如果URL有语法错误，构造函数会抛出异常。第二个参数 protocol 是可选的，指定了可接受的子协议。议的参数例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定义协议。 第二个参数是协议名称，是可选的，服务端和客服端使用的协议必须一致，这样收发消息彼此才能理解，你可以定义一个或多个客户端使用的协议，服务端会选择一个来使用，一个客服端和一个服务端之间只能有一个协议。

var Socket = new WebSocket(url, [protocol] );

注意：基于多线程或多进程的服务器无法适用于 WebSockets，因为它旨在打开连接，尽可能快地处理请求，然后关闭连接。任何实际的 WebSockets 服务器端实现都需要一个异步服务器。

目前大部分浏览器支持 WebSocket() 接口，如 Chrome, Mozilla, Opera 和 Safari。

WS和WSS的区别？？

注意：WebSocket协议定义了两种URL方案，WS和WSS分别代表了客户端和服务端之间未加密和加密的通信。WS(WebSocket)类似于Http URL，而WSS（WebSocket Security）URL 表示连接是基于安全传输层（TLS/SSL）和https的连接是同样的安全机制。

websocket的属性、事件、方法

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

属性

描述

Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。

1 - 表示连接已建立，可以进行通信。

2 - 表示连接正在进行关闭。

3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

注意：上述readyState 属性用于表示链接状态！

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

websocket+nodejs简单实例应用

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

WebSocket API是纯事件驱动，一旦建立全双工连接，当服务端给客户端发送数据或者资源，它能自动发送状态改变的数据和通知。所以你不需要为了状态的更新而去轮训Server，在客户端监听即可。

websocket客户端：

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>websocket测试(runoob.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 初始化一个 WebSocket 对象，参数指明url
               var ws = new WebSocket("ws://localhost:9999");
                
               // WebSocket 连接时候触发
               ws.onopen = function()
               {
                  //使用 send() 方法发送数据
                  ws.send("客户端发送的数据");
                  alert("数据发送中...");
               };
               
               // 接收服务端数据时触发
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                   console.log(received_msg);
                  alert("数据已接收...");
               };
               
               //断开 web socket 连接成功触发事件
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

websocket服务端：

WebSocket 在服务端的实现非常丰富。Node.js、Java、C++、Python 等多种语言都有自己的解决方案。这里主要记录nodejs作为websocket服务端的解决方案。

Node 实现有以下三种。

这里主要记录使用nodejs搭建websocket服务器的方案

ws 是nodejs的一个WebSocket库，可以用来创建服务。使用cnpm install ws 命令行进行安装

下面是server.js的文件内容，cmd转到文件目录运行 node server.js 命令行

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 9999 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
		ws.send("服务端接收到请求后，发送给客户端的数据");
    });
	
});

效果如下：

进阶：websocket+nodejs模拟股票实例

上面的例子很简单，只是为了演示如何运用nodejs的ws创建一个WebSocket服务器。且可以接受客户端的消息。那么下面这个例子演示股票的实时更新。客服端只需要连接一次，服务器端会不断地发送新数据，客户端收数据后更新UI.页面如下，有五只股票，开始和停止按钮测试连接和关闭。

注意：一定要先在项目文件夹下运行 cnpm install ws 安装wwebsocket依赖包，不然会报以下错误

服务端server.js文件内容如下：

//引入websocket 的ws模块
var WebSocketServer = require('ws').Server,

//初始化websocket对象
wss = new WebSocketServer({ port: 8181 });



//初始数据对象
var stocks = {
    "AAPL": 95.0,
    "MSFT": 50.0,
    "AMZN": 300.0,
    "GOOG": 550.0,
    "YHOO": 35.0
}

//获取随机数据的函数
function randomInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

//定时器返回的句柄
var stockUpdater;
var randomStockUpdater=function(){
    for (var symbol in stocks) {  //遍历对象属性进行随机增加浮动数值
        if(stocks.hasOwnProperty(symbol)) {   //遍历对象非继承属性
            var randomizedChange = randomInterval(-150, 150);
            var floatChange = randomizedChange / 100;
            stocks[symbol] += floatChange;
        }
    }

	//随机时间间隔，获取一个数据区间中的随机数值
    var randomMSTime = randomInterval(500, 2500);  

    stockUpdater = setTimeout(function() {   //模拟股票数据变化，随机更改对象属性值
        randomStockUpdater();
    }, randomMSTime);


}


//执行模拟数据变化更新
randomStockUpdater();

//声明clientStocks接收客户端数据
var clientStocks = [];

//连接建立后
wss.on('connection', function (ws) {

	//定义数据更新函数
    var sendStockUpdates = function (ws) {
        if (ws.readyState == 1) {  //readyState为1表示已经建立连接
            var stocksObj = {};
            for (var i = 0; i < clientStocks.length; i++) {
              var symbol = clientStocks[i];
                stocksObj[symbol] = stocks[symbol];
            }
            if (stocksObj.length !== 0) {  //数据包内容不为空时将数据响应给客户端
                ws.send(JSON.stringify(stocksObj));//需要将对象转成字符串。WebSocket只支持文本和二进制数据
                console.log("更新", JSON.stringify(stocksObj));
            }
           
        }
    }

	//服务器端定时更新响应数据
    var clientStockUpdater = setInterval(function () {
        sendStockUpdates(ws);
    }, 1000);

	//服务器端接收到客户端发送过来的数据，根据请求的数据更新响应数据
    ws.on('message', function (message) {
        var stockRequest = JSON.parse(message);
        console.log("服务器收到的消息：", stockRequest);
        clientStocks = stockRequest['stocks'];
        sendStockUpdates(ws);
    });
 
});

客户端client.html 文件如下，界面使用了和jquery和bootstrape框架

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket  Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/jquery-1.12.3.min.js"></script>
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="vertical-center">
    <div class="container">
        <h1>Stock Chart over WebSocket</h1>
        <button class="btn btn-primary">开始</button>
        <button class="btn btn-danger">停止</button>
        <table class="table" id="stockTable">
            <thead>
            <tr>
                <th>Symbol</th>
                <th>Price</th>
            </tr>
            </thead>
            <tbody id="stockRows">
            <tr>
                <td>
                    <h3>AAPL</h3></td>
                <td id="AAPL">
                    <h3><span class="label label-default">95.00</span></h3>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>MSFT</h3></td>
                <td id="MSFT">
                    <h3><span class="label label-default">50.00</span></h3>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>AMZN</h3></td>
                <td id="AMZN">
                    <h3><span class="label label-default">300.00</span></h3>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>GOOG</h3></td>
                <td id="GOOG">
                    <h3><span class="label label-default">550.00</span></h3>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>YHOO</h3></td>
                <td id="YHOO">
                    <h3><span class="label label-default">35.00</span></h3>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
    <script>
	//客户端初始化websocket对象
    var ws = new WebSocket("ws://localhost:9999");

	//客户端发送的请求对象
    var stock_request = { "stocks": ["AAPL", "MSFT", "AMZN", "GOOG", "YHOO"] };

    var isClose = false; //通讯连接是否被关闭

	//界面的初始化数据对象
    var stocks = {
        "AAPL": 0, "MSFT": 0, "AMZN": 0, "GOOG": 0, "YHOO": 0
    };

	//定义更新UI界面的函数
    function updataUI() {
		//websocket连接上时触发
        ws.onopen = function (e) {
            console.log('Connection to server opened');
            isClose = false;
            ws.send(JSON.stringify(stock_request));
            console.log("sened a mesg");
        }

        // UI update function
        var changeStockEntry = function (symbol, originalValue, newValue) {
            var valElem = $('#' + symbol + ' span');
            valElem.html(newValue.toFixed(2)); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
            if (newValue < originalValue) {
                valElem.addClass('label-danger');
                valElem.removeClass('label-success');
            } else if (newValue > originalValue) {
                valElem.addClass('label-success');
                valElem.removeClass('label-danger');
            }
        }

        // websocket接收到服务端数据时触发
        ws.onmessage = function (e) {
            var stocksData = JSON.parse(e.data);  //字符串转JSON对象
            console.log(stocksData);
            for (var symbol in stocksData) {  //遍历对象属性，更改客户端界面数据
                if (stocksData.hasOwnProperty(symbol)) {
                    changeStockEntry(symbol, stocks[symbol], stocksData[symbol]);
                    stocks[symbol] = stocksData[symbol];
                }
            }
        };
    }

    updataUI();  //更新UI界面

    $(".btn-primary").click(function() {  //开始按钮点击可以在断开后重连websocket
        if (isClose) {
            ws = new WebSocket("ws://localhost:9999");
        }
        updataUI();  //重连后更新UI界面
    });

    $(".btn-danger").click(function() {  //断开按钮可以关闭websocket连接
        ws.close();
    });

	//触发websocket连接关闭事件
    ws.onclose = function (e) {
        console.log("Connection closed", e);
        isClose = true;
    };
   

    </script>
</body>
</html>

源码见文章底部链接，效果如下：

进阶：websocket+nodejs模拟聊天室实例

上面的例子是连接建立之后，服务端不断给客户端发送数据。接下来例子是一个简单的聊天室类的例子。可以建立多个连接。

1.安装node-uuid模块，用来给每个连接一个唯一号。

2、客户端代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket Echo Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/jquery-1.12.3.min.js"></script>
    <script src="../js/jquery-1.12.3.min.js"></script>
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script>
        //建立连接
        var ws = new WebSocket("ws://localhost:8181");
        var nickname = "";
        ws.onopen = function (e) {
            console.log('Connection to server opened');
        }
        //显示函数，根据客户端接收到的数据类型进行ui界面显示
        function appendLog(type, nickname, message) {
            if (typeof message == "undefined") return;
            var messages = document.getElementById('messages');
            var messageElem = document.createElement("li");
            var preface_label;
            if (type === 'notification') {
                preface_label = "<span class=\"label label-info\">*</span>";
            } else if (type == 'nick_update') {
                preface_label = "<span class=\"label label-warning\">*</span>";
            } else {
                preface_label = "<span class=\"label label-success\">"
                + nickname + "</span>";
            }
            var message_text = "<h2>" + preface_label + "&nbsp;&nbsp;"
            + message + "</h2>";
            messageElem.innerHTML = message_text;
            messages.appendChild(messageElem);
        }
        //收到消息处理
        ws.onmessage = function (e) {
            var data = JSON.parse(e.data);
            nickname = data.nickname;
            appendLog(data.type, data.nickname, data.message);
            console.log("ID: [%s] = %s", data.id, data.message);
        }
        ws.onclose = function (e) {
            appendLog("Connection closed");
            console.log("Connection closed");
        }
        //发送消息
        function sendMessage() {
            var messageField = document.getElementById('message');
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(messageField.value);
            }
            messageField.value = '';
            messageField.focus();
        }
		     
		
        //修改名称
        function changName() {
            var name = $("#name").val();
            if (ws.readyState === WebSocket.OPEN) {
                ws.send("/nick " + name);
            }
        }

        function disconnect() {
            ws.close();
        }
    </script>
</head>

<body >
    <div class="vertical-center">
        <div class="container">
            <ul id="messages" class="list-unstyled"></ul>
            <hr/>
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                <div class="form-group">
                    <input class="form-control" type="text" id="message" name="message"
                           placeholder="Type text to echo in here" value="" autofocus/>
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        onclick="sendMessage();">
                    Send Message
                </button>

            </form>
            <div class="form-group"><span>nikename：</span><input id="name" type="text" /> <button class="btn btn-sm btn-info" onclick="changName();">change</button></div>
        </div>
    </div>
</body>
</html>

3、服务端代码如下：

//引入ws模块，初始化websocket服务端
var WebSocket = require('ws');
var WebSocketServer = WebSocket.Server,
wss = new WebSocketServer({ port: 8181 });

//引入node-uuid模块，唯一标识
var uuid = require('node-uuid');

//客户端数组
var clients = [];

//遍历所有客户端连接，依次下发数据
function wsSend(type, client_uuid, nickname, message) {
    for (var i = 0; i < clients.length; i++) {
        var clientSocket = clients[i].ws;
        if (clientSocket.readyState === WebSocket.OPEN) {
            clientSocket.send(JSON.stringify({ //websocket传递JSONA字符串格式
                "type": type,
                "id": client_uuid,
                "nickname": nickname,
                "message": message
            }));
        }
    }
}

var clientIndex = 1;

//每一个客户端和服务端建立连接时触发
wss.on('connection', function(ws) {
    var client_uuid = uuid.v4();  //获取随机唯一标识
    var nickname = "AnonymousUser" + clientIndex;
    clientIndex += 1;
    clients.push({ "id": client_uuid, "ws": ws, "nickname": nickname });
    console.log('client [%s] connected', client_uuid);
    var connect_message = nickname + " has connected";
    wsSend("notification", client_uuid, nickname, connect_message);
    console.log('client [%s] connected', client_uuid);
	
    ws.on('message', function(message) {
        if (message.indexOf('/nick') === 0) { //json字符串数据包含修改昵称的数据时
            var nickname_array = message.split(' ');
            if (nickname_array.length >= 2) {
                var old_nickname = nickname;
                nickname = nickname_array[1];
                var nickname_message = "Client " + old_nickname + " changed to " + nickname;
                wsSend("nick_update", client_uuid, nickname, nickname_message);
            }
        } else {
            wsSend("message", client_uuid, nickname, message);
        }
    });
	
	//断开指定uuid的连接
    var closeSocket = function(customMessage) {
        for (var i = 0; i < clients.length; i++) {
            if (clients[i].id == client_uuid) {
                var disconnect_message;
                if (customMessage) {
                    disconnect_message = customMessage;
                } else {
                    disconnect_message = nickname + " has disconnected";
                }
                wsSend("notification", client_uuid, nickname, disconnect_message);
                clients.splice(i, 1);
            }
        }
    };
	
	//某个客户端连接断开时触发
    ws.on('close', function () {
        closeSocket();
    });
	
	//SIGINT这个信号是系统默认信号，代表信号中断，就是ctrl+c
    process.on('SIGINT', function () {
        console.log("Closing things");
        closeSocket('Server has disconnected');
        process.exit();
    });
});

效果如下：

源码见文章尾部

上述代码实现了一个服务器下的多个客户端连接，单并没有实现客户端的及时通讯，比如微信和QQ的单聊和群聊效果，可以参考以下demo

参考网址：https://blog.csdn.net/CJXBShowZhouyujuan/article/details/77816944

node-uuid是什么？？

nodejs生成UID（唯一标识符）——node-uuid模块

unique identifier 惟一标识符 -->> uid

在项目开发中我们常需要给某些数据定义一个唯一标识符，便于寻找，关联。node-uuid模块很好的提供了这个功能。

使用起来很简单，两种：

1、uuid.v1(); -->基于时间戳生成（time-based）

2、uuid.v4(); -->随机生成 (random)

通常我们使用基于时间戳 v1() 生成的UID，随机生成 v4() 还是有一定几率重复的。

    var UUID = require('uuid');
    var ID = UUID.v1();

websocket 和 socket 的区别？？

软件通信有七层结构，下三层结构偏向与数据通信，上三层更偏向于数据处理，中间的传输层则是连接上三层与下三层之间的桥梁，每一层都做不同的工作，上层协议依赖与下层协议。基于这个通信结构的概念。

Socket 其实并不是一个协议，是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口。当两台主机通信时，让 Socket 去组织数据，以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议，IP 协议的连接则依赖于链路层等更低层次。

WebSocket 则是一个典型的应用层协议。

总的来说：Socket 是传输控制层协议，WebSocket 是应用层协议。

源码：http://pan.baidu.com/s/1c2FfKbA

或百度链接：https://pan.baidu.com/s/1cabjJKikHC3xBW-qUtP-3g 提取码：yb4u

参考网址：

https://www.cnblogs.com/stoneniqiu/p/5402311.html

http://www.runoob.com/html/html5-websocket.html

收起

展开全文

websocket

nodejs-websocket创建websocket服务器

千次阅读 2020-11-06 14:54:52

nodejs-websocket创建websocket服务器首先，感谢csdn各位大佬们对创建...// 搭建websocket服务器 const ws = require("nodejs-websocket"); var _server = ws.createServer(conn => { // 接收客户端返回的数

nodejs-websocket创建websocket服务器

首先，感谢csdn各位大佬们对创建websocket的解释！
1.安装模块

npm install nodejs-websocket

2.搭建websocket服务端
这个是一个js文件

//websocket.js
// 搭建websocket服务器
const ws = require("nodejs-websocket");
var _server = ws.createServer(conn => {
	// 接收客户端返回的数据
	conn.on("text", function(str) {
		console.log(str, "接收客户端传过来的值");
		
	});

    //客户端关闭连接
	conn.on("close", function() {
		
	});

	conn.on("error", function(err) {
		//error
		console.log(err, "连接报错");
	});
});
// 定义端口为2002【端口自己随意定义】
const port = 2002;
_server.listen(port, function() {
	
	console.log("连接成功")
	console.log('listening on websocketServer');
})

3.搭建websocket客户端
写个简单的客户端
这个是页面写的内容

        //建立连接
        var ws = new WebSocket("ws://localhost:2002");

		ws.onopen = function(evt) {
			console.log("Connection open ...");
            let sendobj={
				id:"0001",
				name:"发送的值"
			}
			console.log(sendobj);
			ws.send(sendobj);
		};

		ws.onmessage = function(e) {
			console.log(typeof e.data);
			console.log(e);
			ws.close()
		};


		ws.onclose = function(evt) {
			console.log("Connection closed.");
		};
		
		ws.onerror = function(err){
			console.log(err);
		}

4.启动上面写好的js
命令行运行js，启动websocket服务器

node websocket.js

启动结束以后显示一下画面【这个是用心跳机制显示的页面】
在这里插入图片描述
浏览器页面：有个localhost,下面是header

下面是message，说明是信息发送过来了。
.

===========================================================
下面是如果想用心跳机制
【页面】

// //serverUrl心跳机制
		// let socketUrl = 'wss://echo.websocket.org1';
		let socketUrl = 'ws://localhost:2002';
		//保存websocket对象
		let socket;
		// reConnect函数节流标识符
		// 避免重新连接
		let flag = true;
		//心跳机制
		let heart = {
			timeOut: 3000,
			timeObj: null,
			serverTimeObj: null,
			start: function() {
				console.log('start');
				let self = this;
				//清除延时器
				this.timeObj && clearTimeout(this.timeObj);
				this.serverTimeObj && clearTimeout(this.serverTimeObj);
				this.timeObj = setTimeout(function() {
					//这里发送一个心跳，后端收到后，返回一个心跳消息，
					//onmessage拿到返回的心跳就说明连接正常
					socket.send('兄弟，你还好吗?'); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
					//定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
					self.serverTimeObj = setTimeout(function() {
						socket.close();
						reConnect(socketUrl);
					}, self.timeOut)
					// console.log(self.serverTimeObj,"000");
				}, this.timeOut)
				// console.log(this.timeObj,"???");
			}
		}
		//建立websocket连接函数
		function createWebsocket(url) {
			try {
				socket = new WebSocket(url);
				init();
				
			} catch (e) {
				//进行重连;
				console.log('websocket连接错误');
				reConnect(socketUrl);
			}
		}

		//对WebSocket各种事件进行监听   
		function init() {

			socket.onopen = function() {
				//连接已经打开
				//重置心跳机制
				console.log(event.data, "连接已经打开");
				heart.start();
			}
			socket.onmessage = function(event) {
				//通过event.data获取server发送的信息
				//对数据进行操作
				console.log(event.data, "对数据进行操作");
				//收到消息表示连接正常，所以重置心跳机制
				heart.start();
			}
			socket.onerror = function() {
				//报错+重连
				console.log('socket连接出错');
				reConnect(socketUrl);
			}
			socket.onclose = function() {
				console.log('socket连接关闭');
			}
		}

		//重连函数
		//因为重连函数会被socket事件频繁触发，所以通过函数节流限制重连请求发送
		function reConnect(url) {
			if (!flag) {
				return;
			}
			flag = false;
			//没连接上会一直重连，设置延迟避免请求过多
			setTimeout(function() {
				console.log("123");
				createWebsocket(url);
				flag = true;
			}, 3000)
		}
		createWebsocket(socketUrl)
		// 第一步创建WebSocket连接，
		// 第二步，调用init，封装各种监听事件
		// 第三步，发生错误，重连；

		//        没有错误，正常连接，重置心跳机制

使用ws创建websocket服务器

使用ws-廖雪峰

收起

展开全文

WebSocket学习(三)——使用nodejs搭建WebSocket服务器
万次阅读 2017-09-18 16:46:31

使用nodejs搭建WebSocket服务器

收起
如何用 nodejs 创建 websocket 服务器，例子
2022-05-25 17:44:06

如何用 nodejs 创建 websocket 服务器 序前端时间将我网站的后台从 php 改写到了 nodejs，并且运行正常，也添加了好多一直想有的功能。现在想做一个网友交互的功能，想到了 websocket，在网上找了下资料，找到了...

收起

前端网络协议
使用nodejs搭建websocket服务器与unity通信
2021-01-12 10:26:52

ws：是nodejs的一个WebSocket库，可以用来创建服务。 https://github.com/websockets/ws nmp install ws 或者全局 npm install ws -g 3.server.js 在项目里面新建一个server.js，创建服务，指定8181端口，将收到的...

收起

unity c#
使用Nodejs做websocket服务端与客户端实现即时聊天
2019-08-07 02:15:53

NULL 博文链接：https://21jhf.iteye.com/blog/2139906

收起
nodejs搭建websocket（前后端交互小demo）
2021-07-12 17:46:50

var ws = require("nodejs-websocket"); ws.createServer(function(conn){ conn.on("text",function(str){ //服务端接收到的数据 console.log("服务端收到:" + str); //接收到的数据再发送回客户端 conn....

收起

javascript
nodejs基于express搭建websocket
千次阅读 2022-03-17 16:14:18

一、搭建websocket 搭建node项目并安装依赖： npm install express -g npm install express-generator -g express myproject npm install ws 在 app.js 中配置 ws： var websocket = require('ws'); var server = ...

收起

react.js javascript
Nodejs搭建wss服务器教程
2020-10-19 19:37:34

主要为大家详细介绍了Nodejs搭建wss服务器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
用nodeJS搭建本地文件服务器的几种方法小结
2021-01-02 03:53:54

搭建nodejs服务器步骤: 1.安装nodejs服务，node相当于apache服务器 2.在自己定义的目录下新建服务器文件如 server.js 例如，我在E:\PhpProject\HTML5\websocket下创建了server.js文件 var http = require('http')...

收起
【小5聊】Linux服务器centos安装NodeJs简单实现WebSocket实时通讯，NodeJs服务器搭建（基础篇）
2020-05-26 10:16:49

先查看自己centos7服务器上是否安装nodejs node -v npm -v 如果没安装就会提示查找不到文件目录以及命令没发现【NodeJs安装】【yum】什么是yum，大概了解下 Yum（全称为 Yellow dog Updater, Modified）...

收起
Nodejs搭建wss服务器
2017-05-24 08:29:00

把创建好的https服务器丢进websocket的创建函数里，ws会用这个服务器来创建wss服务 // 同样，如果丢进去的是个http服务的话那么创建出来的还是无加密的ws服务 wss.on( ' connection ' , function ( wsConnect ) {...

收起
websocket聊天室的基础原理（html5，nodejs搭建服务器）
千次阅读 2021-11-10 14:53:52

（2）创建websocket服务器app.js： // 导入nodejs-websocket包 const ws = require('nodejs-websocket') // 创建一个服务 // 每次只要有用户链接下面的代码就会执行一次，会给当前链接用户创建对象 var server = ws....

收起
Nodejs+webSocket搭建多人聊天室
千次阅读 多人点赞 2019-04-14 20:13:46

NodeJs+webSocket搭建多人聊天室准备的东西：第一步：安装插件并且完善服务端第二步：搭建客户端并与服务端的通信第三步：添加CSS样式第四步：总结今天花了一个上午的时间去学习了一下使用nodejs＋websocket搭建...

收起
nodejs搭建websocket实现即时通信
2022-06-13 23:51:49

nodejs搭建websocket

收起

nginx 网络协议
nodejs+websocket简易聊天室的学习
千次阅读 2022-05-01 20:21:55

老师要求做一个仿探探的小程序项目，我很不幸的成为了混子小组里的一个不那么混的混子，然后恰逢假期，学习了一下nodejs上传图片并将相对路径保存到数据库，本以为完成这个就可以开摆，但我太天真了，几个老外比我...

收起

学习前端
基于nodejs + websocket 搭建即时通讯应用
万次阅读 多人点赞 2018-03-08 10:46:10

如果说AJAX是像手机发短信...在以前你可能会使用AJAX进行轮询，这造成了服务器的多重压力，使用websocket，既可实现一次连接，保持通话的作用。而它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、...

收起

即时通讯前端
websocket简明教程(nodejs-websocket库、socket.io库实现Web聊天室)
千次阅读 2019-03-15 23:15:01

源码地址: github 建议阅读时间: 1 hour 在学习websocket中，查阅了大量的中英文资料，这里将成果分享给大家

收起

socket.io
nodejs利用websocket搭建一个聊天室
2019-09-08 23:22:09

搭建服务器 搭建一个返回网页的端口 const express = require('express') const app = express() const path = require('path') const fs = require('fs') app.use(express.static(path.join(__dirname, 'public')))...

收起

前端
前端架构师破局技能，NodeJS 落地 WebSocket 实践
2021-12-07 15:51:10

本文从网络协议，技术背景，安全和生产应用的方向，详细介绍 WebSocket 在 Node.js 中的落地实践。大纲预览本文介绍的内容包括以下方面：网络协议进化 Socket.IO？ ws 模块实现 Express 集成 WebSocket ...

收起

前端 node.js javascript
Nodejs之WebSocket
千次阅读 2019-04-08 11:40:28

　二、运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器 　三、Node中的WebSocket 　四、socket.io 　五、扩展阅读一、概述-what's WebSocket? 1.1 为什么我们需要WebSocket这样的实时的通信协议...

收起
WebSocket介绍和使用nodejs+socket.io搭建服务器和客户端
千次阅读 2018-05-30 10:29:31

它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 ——百度百科目的：即时通讯，替代轮询网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力...

收起
Node.js之构建WebSocket服务
千次阅读 2022-01-22 17:01:40

WebSocket简介 WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工通讯的协议。它有如下特点：基于TCP，客户端和服务端只建立一个TCP连接。...服务端我们使用nodejs-websocket包来实现。 const ws = r

收起

node.js

» 介绍

» nodejs搭建websocket服务

» 客户端发送消息页面

» 客户端接收消息页面

用nodejs搭建websocket服务器

【linux环境搭建】使用nodejs搭建websocket服务器

文章目录

1 前言

2 准备工作

2.1 安装nodejs

2.2 安装npm

3 打开端口

4 编写websocket服务端——js

4.1 测试websocket服务端

5 编写wesocket客户端——html

6 查看端口使用情况

7 运行结果

8 遇到的问题

nodejs-websocket 基于node创建websocket服务器

websocket 学习--简单使用，nodejs搭建websocket服务器，到模拟股票，到实现聊天室

websocket简介：

和http协议的不同？？

websocket如何工作？？

WS和WSS的区别？？

websocket的属性、事件、方法

websocket+nodejs简单实例应用

websocket客户端：

websocket服务端：

这里主要记录使用nodejs搭建websocket服务器的方案

进阶：websocket+nodejs模拟股票实例

进阶：websocket+nodejs模拟聊天室实例

node-uuid是什么？？

websocket 和 socket 的区别？？

nodejs-websocket创建websocket服务器

nodejs-websocket创建websocket服务器

使用ws创建websocket服务器

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

如何用 nodejs 创建 websocket 服务器，例子

使用nodejs搭建websocket服务器与unity通信

使用Nodejs做websocket服务端与客户端实现即时聊天

nodejs搭建websocket（前后端交互小demo）

nodejs基于express搭建websocket

Nodejs搭建wss服务器教程

用nodeJS搭建本地文件服务器的几种方法小结

【小5聊】Linux服务器centos安装NodeJs简单实现WebSocket实时通讯，NodeJs服务器搭建（基础篇）

Nodejs搭建wss服务器

websocket聊天室的基础原理（html5，nodejs搭建服务器）

Nodejs+webSocket搭建多人聊天室

nodejs搭建websocket实现即时通信

nodejs+websocket简易聊天室的学习

基于nodejs + websocket 搭建即时通讯应用

websocket简明教程(nodejs-websocket库、socket.io库实现Web聊天室)

nodejs利用websocket搭建一个聊天室

前端架构师破局技能，NodeJS 落地 WebSocket 实践

Nodejs之WebSocket

WebSocket介绍和使用nodejs+socket.io搭建服务器和客户端

Node.js之构建WebSocket服务

nodejs搭建websocket服务器