使用ws

简介: 使用ws

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

ws模块

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

"dependencies": {
    "ws": "1.1.1"
}
1.
2.
3.
整个工程结构如下:
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可以写任意的路径。


相关文章
|
11月前
|
小程序 网络安全 Windows
swoole(二)ws与wss的区别
关于ws与wss的区别这里简单的说一下我目前的见解。 如果你有更多的见解欢迎在下方留言讨论。 最简单的理解就是: 服务器上服务端用的是:websocket协议(支持客户端的ws访问) 服务器上服务端用的是:websocket协议+TLS(支持客户端的wss访问) 客户端上用的是: ws协议或者wss协议 Wss与ws其实就和http与https的关系,wss需要验证域名证书,ws不需要验证域名证书。 这个其实都不重要。我们在开发的时候关系不是很大。 下边的才是我要说的重点: Ws链接可以使用IP+端口号的形式访问。 Wss链接只能使用域名的形式访问,因为服务器端需要通过域名来找对应的ssl证书
608 0
|
JavaScript
electron中使用ws
electron中使用ws
|
应用服务中间件 网络安全 nginx
Nginx配置WebSocket 【支持wss与ws连接】
Nginx配置WebSocket 【支持wss与ws连接】
7116 1
|
6月前
|
测试技术 Python
Tornado ws示例
Tornado ws示例
43 1
|
6月前
|
Java
WebService - Client调用(Axis2-Document)
WebService - Client调用(Axis2-Document)
65 0
|
前端开发 Python
解决报错:Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error
报错全文为:Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error during Websocket handshake:Unexpected response code:400。如下图所示。
解决报错:Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error
|
XML 数据格式 网络架构
[WS]Web服务系列(三) XML技术
对于XML这个名字,我们已经再熟悉不过了。它可以说是既简单又复杂,因为XML本身具有简单明确的规则,但随着越来越多基于XML技术的新应用的出现,它又演化出各种复杂的语言。希望这篇帖子能为你解决以下问题:XML是什么、我们为什么需要它以及怎样使用它。
1354 0
|
XML Java 网络架构
[WS]一个简单的WSDL文档(下)
虽然发布的服务很简单,Axis帮我们生成的WSDL文档看起来却是比较复杂的,之所以这样的主要原因是WSDL要考虑到兼容各种实现和具有可扩展性,这就像我们使用一些框架做开发会使代码总量增加,而好处是使逻辑更加清晰。
1253 0
|
XML 网络架构 数据格式
[WS]一个简单的WSDL文档(上)
现在,简单解释一下《使用Axis发布简单的Web服务》中发布的Web服务所对应WSDL文档的内容和结构。请注意,同样的Java类在不同的Web服务开发包中得到的WSDL文档不一定完全相同,这里还是以使用Axis的情况作为例子。
1306 0