WebSocket 前端后端(nodejs)

最新推荐文章于 2025-03-19 16:12:08 发布

泉水老叮当

最新推荐文章于 2025-03-19 16:12:08 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript学习 Web

本文链接：https://blog.youkuaiyun.com/SpringDou/article/details/84069456

版权

Web 同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript学习

4 篇文章

订阅专栏

WebSocket是一种TCP连接，用于实现后端主动向前端推送数据。在握手阶段使用HTTP/HTTPS协议，之后则通过WebSocket协议传输。前端创建WebSocket对象并与服务器建立连接，NodeJS服务端可以通过websocket模块实现简单的WebSocket服务。

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

WebSocket是区别于HTTP/HTTPS的另外一种协议，目的是实现后端主动向前端发送数据，是一种TCP的连接。

1. WebSocket的前后端握手

WebSocket协议在握手连接的时候，走的是HTTP/HTTPS协议的upgrade请求，但是在握手之后的数据传输走的就是WebSocket协议了。

2. WebSocket前端简单代码

var ws = new WebSocket("ws://localhost:8080/msg");
 
ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
	console.log("Received Message: " + evt.data);
	ws.close();
};
 
ws.onclose = function(evt) {
	console.log("Connection closed.");
};

在创建WebSocket对象后，会自动向服务器发起连接，本例web服务器协议为HTTP, 地址为localhost:8080, "ws:"代表websocket协议，如果服务器端是HTTPS协议，为"wss:"

查看WebSocket的状态，可以用如下语句:

ws.readyState === WebSocket.OPEN

如果服务端对客户端进行分类或者服务端需要子协议从而进行不同的处理，则客户端可以通过WebSocket的protocol（option选项）来设置子协议。

查看发送是否完成，则可以利用如下语句：

if(ws.bufferedAmount === 0)
{
    console.log('发送数据结束')
}

bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束3. 服务端(NodeJS)的简单代码

3. 服务端实现很简单

NodeJS可以有很多模块，当然如果你HTTP服务器用的框架不同，可能会有更简单的对应websocket的模块，本例用基础模块 WebSocket.

安装websocket:

npm install --save websocket

在下载之后，就可以利用该模块开发websocket服务。

const http = require('http');
const socket = require('websocket').server
var server = http.createServer((req,res)=>{
    console.log('new http request')
})   //http 服务

var ws = new socket({httpServer: server})  //websocket握手必须通过http/https协议

ws.on('request', (request)=>{
    request.accept(request.requestedProtocols[0], request.origin)
})

ws.on('connect', (connection)=>{
    connection.on('message', (data)=>{
        Console.log('client data is: '+ data.data)
    })

    connection.on('close', (reason, description)=>{
        Console.log('connection is closed, reason code is :'+ reason + ' detail: '+ description)
    })
})

参考文档 WebSocket学习