Question

我是websockets的新手，只是想了解如何从服务器从客户端浏览器监听消息，反之亦然。

我正在使用Node.js / Express设置，只是希望能够首先侦听来自客户端的任何消息。

我一直在研究这个https://github.com/websockets/ws库，并尝试了这些示例，但是无法在我的localhost环境中正常工作。

当我收听消息时，我也不清楚需要注意什么。

我在客户端上使用什么代码，即url +端口，在服务器上使用什么代码？

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost/path', {
  perMessageDeflate: false
});

Answer 1

直接使用websockets可能会很麻烦，建议您使用框架来抽象该层，以便在客户端不支持时可以轻松地回退到其他方法。例如，这是直接使用Express js和Websockets的直接实现。此示例还允许您将同一服务器用于HTTP调用。

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();

//initialize a simple http server
const server = http.createServer(app);

//initialize the WebSocket server instance
const wss = new WebSocket.Server({ server });

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

    //connection is up, let's add a simple simple event
    ws.on('message', (message) => {

        //log the received message and send it back to the client
        console.log('received: %s', message);
        ws.send(`Hello, you sent -> ${message}`);
    });

    //send immediatly a feedback to the incoming connection    
    ws.send('Hi there, I am a WebSocket server');
});

//start our server
server.listen(3000, () => {
    console.log(`Server started on port ${server.address().port} :)`);
});

对于客户，您可以执行以下操作：

const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
  console.log('ws opened on browser')
  ws.send('hello world')
}

ws.onmessage = (message) => {
  console.log(`message received`, message.data)
}

就像我上面提到的那样，建议您对websockets使用成熟的框架。如果您的应用程序最小且不需要扩展，则可以使用任何开放源代码库，其中socket.io是最受欢迎的。

但是，如果您正在谈论实现将其用于生产级别，则应该知道开源解决方案不允许进行可伸缩性，故障转移，消息排序等。在这种情况下，您必须实现一个实时平台即服务工具。 Ably’s Data Stream Network是我亲自在很多项目中使用的一种解决方案。

Answer 2

请注意，socket.io是一个使用websocket的后端/前端库，但是如果客户端浏览器不支持websocket，它也具有许多后备功能。以下示例适用于ws后端。

服务器

const WS = require('ws')

const PORT = process.env.PORT || 8080

const wss = new WS.Server({
  port: PORT
}, () => console.log(`ws server live on ${PORT}`))

const errHandle = (err) => {
  if(err) throw err
}

wss.on('connection', (socket) => {
  console.log('something connected')

  socket.send('you are connected', errHandle)

  socket.on('message', (data) => {
    console.log(`socket sent ${data}`)

    socket.send('message received', errHandle)
  })
})

客户端（浏览器）

(() => {
  const ws = new WebSocket('ws://localhost:8080')
  ws.onopen = () => {
    console.log('ws opened on browser')
    ws.send('hello world')
  }

  ws.onmessage = (message) => {
    console.log(`message received ${message}`)
  }

})()

edit：哦，ws和http是不同的协议。您将需要其他服务器来提供您的http文件

关于如何在客户端和服务器之间使用Websocket的简单示例

2 个答案: