当前位置: 首页 > 工具软件 > Ws.js > 使用案例 >

ws协议 服务器,Node.js WebSocket 协议

拓拔弘厚
2023-12-01

WebSocket

websocket 是 HTML5 标准的一个新的 网络协议。它是基于 HTTP 协议之上的扩展,是一种可以双向通信的协议。

传统的 HTTP 协议 通信,服务端是不能主动发信息给客户端的。它必须是客户端一个请求,服务器一个响应,一来一回。那么基于这种通信的方式,如果想构建一个网络在线聊天应用,就没有办法,因为不能主动推送信息,要客户端一直刷新。

websocket 可以跟 HTTP 协议共用一个端口,它协议的前缀是 ws://,如果是 HTTPS,那么就是 wss://,webSocket 没有同源限制,客户端可以发送任意请求到服务端,只要目标服务器允许。

WS 模块

ws 是一个第三方的 websocket 通信模块,需要安装 npm i ws,websocket 的通信模型跟 HTTP 是一样的,服务端对应客户端模型。

server.js

const WebSocket = require('ws')

const WebSocketServer = WebSocket.Server;

// 创建 websocket 服务器 监听在 3000 端口

const wss = new WebSocketServer({port: 3000})

// 服务器被客户端连接

wss.on('connection', (ws) => {

// 通过 ws 对象,就可以获取到客户端发送过来的信息和主动推送信息给客户端

var i=0

var int = setInterval(function f() {

ws.send(i++) // 每隔 1 秒给连接方报一次数

}, 1000)

})

client.js

const WebSocket = require('ws')

const ws = new WebSocket('ws://localhost:3000')

// 接受

ws.on('message', (message) => {

console.log(message)

// 当数字达到 10 时,断开连接

if (message == 10) {

ws.send('close');

ws.close()

}

})

功能扩充

我们做一点稍微的改变,让双方一来一回通信,加深一下理解。

server.js

const WebSocket = require('ws')

const WebSocketServer = WebSocket.Server

// 创建 websocket 服务器 监听在 3000 端口

const wss = new WebSocketServer({port: 3000})

// 服务器被客户端连接

wss.on('connection', (ws) => {

// 接收客户端信息并把信息返回发送

ws.on('message', (message) => {

ws.send(message, (err) => { // send 方法的第二个参数是一个错误回调函数

if (err) {

console.log(`[SERVER] error: ${err}`);

}

})

})

})

client.js

const WebSocket = require('ws')

const ws = new WebSocket('ws://localhost:3000')

// 发送

ws.on('open', () => {

ws.send('Hello')

})

// 接受

ws.on('message', (message) => {

console.log(message) // Hello

})

浏览器

上面的 WebSocket 客户端,是基于 Node.js 构建的,通常 WS 的应用场景,更多时候面对的客户端是浏览器,我们下面来一个 JavaScript 版本的 client.js。

websocket

// 浏览器提供 WebSocket 对象

var ws = new WebSocket('ws://localhost:3000')

// 发送

ws.onopen = function() {

ws.send('hello')

}

// 接收

ws.onmessage = function(mes) {

alert(mes.data)

if (mes.data === 'hello') {

ws.close()

}

}

 类似资料: