Question

我开始学习node.js.我想使用websockets创建一个聊天应用程序。在控制台中，它工作正常。但是在浏览器中我得到了

未捕获的ReferenceError：未定义require

我用谷歌搜索了answer。我想尝试浏览，但它不能正常工作。这是我的js文件

client.js ：

var WebSocket = require('websocket');
var connector;
var WebSocketClient = WebSocket.client;
var client = new WebSocketClient();


client.on('connectFailed', function (error) {
    console.log('Connect Error: ' + error.toString());
    setTimeout(self.connect, 2000);
});

client.on('connect', function (connection) {
    connector = connection;
    console.log('WebSocket Client Connected');
    connection.on('error', function (error) {
        errorStr = error.toString();
        console.log("Connection Error: " + errorStr);
    });
    connection.on('close', function () {
        console.log('echo-protocol Connection Closed');
    });
    connection.on('message', function (message) {
        if (message.type === 'utf8') {
            console.log("Received: '" + message.utf8Data + "'");
        }
    });
    connection.sendUTF("Hello");
    sender("Working");

});

client.on('error', function (err) {
    console.log("It's an Err " + err.toString());
});

function connect() {
    client.connect('ws://localhost:8765/', 'echo-protocol');
}

function sender(str) {
    connector.sendUTF(str);
}
connect();

这是问题所在。当我运行bunddle.js时。

$ browserify  client.js > bunddle.js
$ node bunddle.js
/home/user/udb/sgg/node/chat/bundle.js:5
var client = new WebSocketClient();
             ^
TypeError: undefined is not a function

Answer 1

您使用的websocket库涉及一些本机C ++绑定。这些与browserify不兼容，因此您无法使用它。您应该只在服务器实现中使用该库，并且在浏览器中运行的client.js中应该使用WebSocket对象。

浏览器提供自己的WebSocket对象。您正在使用的websocket NPM包是浏览器标准WebSocket接口的Node.js实现（好吧，无论如何都是websocket.W3CWebSocket类。）

基本上在浏览器中，您不应该需要require('websocket')或类似的东西，因为浏览器已经为您提供了WebSocket。有关在浏览器中使用WebSockets的示例，请参阅MDN example。

当然，鉴于WebSockets提供了两个端点之间的通信方法，您将需要一个与您的浏览器进行通信的端点。这是您需要像websocket这样的包的地方：实现浏览器与之通信的服务器端端点。

Answer 2

从文档本身开始： https://github.com/websockets/ws

注意：此模块在浏览器中不起作用。文档中的客户端是对后端的引用，该后端在WebSocket通信中具有客户端的角色。

浏览器客户端必须使用本机WebSocket对象。为了使相同的代码在Node.js和浏览器上无缝运行

您可以使用npm上可用的许多包装之一，例如 isomorphic-ws 。

原生api和实现非常酷并且足够

（看不到同构ws的动机）

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

init

webSocket =新的WebSocket（URL，协议）;

const ws = new WebSocket("wss://www.example.com/socketserver");

发送和json

您需要JSON.stringify。后端中的 ws 会很好地处理它。

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send

 ws.send(JSON.stringify(data));

事件

请注意，您没有on（'event'）API 但反而 onopen，onmessage，onclose ，...设置方法

ws.onmessage = function (event) {
  console.log(event.data);
}

或者使用事件和 addEventListner

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

事件总数为：打开，关闭，消息，错误。

很高兴查看文档以及此处的教程

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

Answer 3

使用npm install websocket安装websocket npm模块。然后在文件的开头写下这个，你需要客户端。

var WebSocketClient = require('websocket').client;

注意：Browserify在对它们进行Bundeling时为所有文件创建自己的范围。所以WebSocketClient在使用它的范围内不可用。

如何在浏览器中使用websocket npm库？

3 个答案:

init

发送和json

事件