首页 > 其他分享 >使用ws

使用ws

时间:2023-03-11 15:02:09浏览次数:22  
标签:WebSocket 服务器端 ws 使用 浏览器 message 客户端

要使用WebSocket,关键在于服务器端支持,这样,我们才有可能用支持WebSocket的浏览器使用WebSocket。

ws模块

在Node.js中,使用最广泛的WebSocket模块是​​ws​​,我们创建一个​​hello-ws​​的VS Code工程,然后在​​package.json​​中添加​​ws​​的依赖:

"dependencies": {
"ws": "1.1.1"
}

整个工程结构如下:

hello-ws/
|
+- .vscode/
| |
| +- launch.json <-- VSCode 配置文件
|
+- app.js <-- 启动js文件
|
+- package.json <-- 项目描述文件
|
+- node_modules/ <-- npm安装的所有依赖包

运行​​npm install​​后,我们就可以在​​app.js​​中编写WebSocket的服务器端代码。

创建一个WebSocket的服务器实例非常容易:

// 导入WebSocket模块:
const WebSocket = require('ws');

// 引用Server类:
const WebSocketServer = WebSocket.Server;

// 实例化:
const wss = new WebSocketServer({
port: 3000
});

这样,我们就在3000端口上打开了一个WebSocket Server,该实例由变量​​wss​​引用。

接下来,如果有WebSocket请求接入,​​wss​​对象可以响应​​connection​​事件来处理这个WebSocket:

wss.on('connection', function (ws) {
console.log(`[SERVER] connection()`);
ws.on('message', function (message) {
console.log(`[SERVER] Received: ${message}`);
ws.send(`ECHO: ${message}`, (err) => {
if (err) {
console.log(`[SERVER] error: ${err}`);
}
});
})
});

在​​connection​​事件中,回调函数会传入一个​​WebSocket​​的实例,表示这个WebSocket连接。对于每个WebSocket连接,我们都要对它绑定某些事件方法来处理不同的事件。这里,我们通过响应​​message​​事件,在收到消息后再返回一个​​ECHO: xxx​​的消息给客户端。

创建WebSocket连接

现在,这个简单的服务器端WebSocket程序就编写好了。如何真正创建WebSocket并且给服务器发消息呢?方法是在浏览器中写JavaScript代码。

先在VS Code中执行​​app.js​​,或者在命令行用​​npm start​​执行。然后,在当前页面下,直接打开可以执行JavaScript代码的浏览器Console,依次输入代码:

// 打开一个WebSocket:
var ws = new WebSocket('ws://localhost:3000/test');
// 响应onmessage事件:
ws.onmessage = function(msg) { console.log(msg); };
// 给服务器发送一个字符串:
ws.send('Hello!');

一切正常的话,可以看到Console的输出如下:

MessageEvent {isTrusted: true, data: "ECHO: Hello!", origin: "ws://localhost:3000", lastEventId: "", source: null…}

这样,我们就在浏览器中成功地收到了服务器发送的消息!

如果嫌在浏览器中输入JavaScript代码比较麻烦,我们还可以直接用​​ws​​模块提供的​​WebSocket​​来充当客户端。换句话说,​​ws​​模块既包含了服务器端,又包含了客户端。

​ws​​的​​WebSocket​​就表示客户端,它其实就是WebSocketServer响应​​connection​​事件时回调函数传入的变量​​ws​​的类型。

客户端的写法如下:

let ws = new WebSocket('ws://localhost:3000/test');

// 打开WebSocket连接后立刻发送一条消息:
ws.on('open', function () {
console.log(`[CLIENT] open()`);
ws.send('Hello!');
});

// 响应收到的消息:
ws.on('message', function (message) {
console.log(`[CLIENT] Received: ${message}`);
}

在Node环境下,​​ws​​模块的客户端可以用于测试服务器端代码,否则,每次都必须在浏览器执行JavaScript代码。

同源策略

从上面的测试可以看出,WebSocket协议本身不要求同源策略(Same-origin Policy),也就是某个地址为​​http://a.com​​的网页可以通过WebSocket连接到​​ws://b.com​​。但是,浏览器会发送​​Origin​​的HTTP头给服务器,服务器可以根据​​Origin​​拒绝这个WebSocket请求。所以,是否要求同源要看服务器端如何检查。

路由

还需要注意到服务器在响应​​connection​​事件时并未检查请求的路径,因此,在客户端打开​​ws://localhost:3000/any/path​​可以写任意的路径。

标签:WebSocket,服务器端,ws,使用,浏览器,message,客户端
From: https://blog.51cto.com/wusen/6114597

相关文章

  • 使用velero+minio+restic实现kubernetes业务数据备份与恢复
    概述:Velero(以前称为HeptioArk)为您提供了备份和恢复Kubernetes集群资源和持久卷的工具,可以安全的备份、恢复和迁移Kubernetes集群资源和持久卷。Velero主要提供以下能力......
  • BitBake使用攻略--BitBake的语法知识二
    目录写在前面1.BitBake中的任务2.任务配置2.1依赖2.1.1内部任务间的依赖2.1.2不同菜谱下的任务间依赖2.1.3运行时态下的依赖2.1.4递归依赖2.1.5任务间的依赖2.2事......
  • 让Python PYQT5使用微软流畅设计体系UI
    PyQt-Fluent-Widgets项目地址: https://github.com/zhiyiYo/PyQt-Fluent-Widgets总所周知,Python一般的UI(比如Tkinter)肥肠的丑陋,肥肠的不现代化。蛋是现在微软有流畅设......
  • 安装Vmware后无法启动WSL2
    如果您已经删除了VMware,但是WSL2仍然无法正常工作,可能是因为VMware安装期间对系统进行了一些更改,导致WSL2无法正常运行。您可以尝试按照以下步骤来修复WSL2:打开......
  • 使用POI导出数据到Excel
    0.准备工作自行去apache的maven仓库查找以下关于poi的依赖(x.x为版本号)1.poi-x.x.jar2.poi-ooxml-x.x.jar3.xmlbeans-x.x.x.jar4.poi-ooxml-schemas-x.x.jar5.poi-o......
  • 使用Git进行版本控制,不同的项目怎么设置不同的提交用户名和邮箱呢?
    1.全局设置用户名和邮箱因为平时除了开发公司项目还会写自己的项目或者去维护开源项目,一般情况下,公司会要求提交代码时使用自己的真名或者拼音和公司邮箱,以前就只会设置全......
  • 为什么 Go 语言 struct 要使用 tags
    原文链接:为什么Go语言struct要使用tags在Go语言中,struct是一种常见的数据类型,它可以用来表示复杂的数据结构。在struct中,我们可以定义多个字段,每个字段可以有不......
  • 实验1 pyhton开发环境使用和编程初体验
    实验任务1task1:task1-1源码:1#print输出的几种用法23#用法1:用于输出单个字符串或单个变量4print('hey,u')56#用法2:用于输出多个数据项,用逗号分隔......
  • vue2使用ECharts自适应大小
    1.安装监听容器大小变化的插件npminstallelement-resize-detector--save2.ECharts已经有重新绘制图表的函数 resize();<template><divid="home">......
  • 量化系统 GUI 库 PyQt5 基础以及使用技巧(上)
    量化系统GUI库PyQt5基础以及使用技巧(上)python流行的图形界面库PyQt:一个基于C++库Qt的Python库,提供了丰富的GUI工具和高度可定制的UI设计,也是很多商业应用程序的......