使 node.js 代码在浏览器中工作

Question

我是 Node.js 的新手，正在创建一个普通的聊天应用程序以了解更多信息。我正在使用 ws 库

并且在我的实验中，我发现 node.js 代码不能直接在浏览器中工作（我更具体到 require()）。所以为了让它在浏览器中工作，我不得不使用 browserify 将代码转换为浏览器兼容。

但是转换后的代码抛出未定义函数的错误

我的node.js代码

var WebSocket = require('ws')
  , ws = new WebSocket('ws://localhost:8080');
ws.on('open', function() {
    var firstMessage = '{"type":"name","message":"god"}';
    ws.send(firstMessage.toString());
});
ws.on('message', function(message) {
    console.log('received: %s', message);
});

我使用 browserify 转换的代码

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

/**
 * Module dependencies.
 */

var global = (function() { return this; })();

/**
 * WebSocket constructor.
 */

var WebSocket = global.WebSocket || global.MozWebSocket;

/**
 * Module exports.
 */

module.exports = WebSocket ? ws : null;

    /**
     * WebSocket constructor.
     *
     * The third `opts` options object gets ignored in web browsers, since it's
     * non-standard, and throws a TypeError if passed to the constructor.
     * See: https://github.com/einaros/ws/issues/227
     *
     * @param {String} uri
     * @param {Array} protocols (optional)
     * @param {Object) opts (optional)
     * @api public
     */

    function ws(uri, protocols, opts) {
      var instance;
      if (protocols) {
        instance = new WebSocket(uri, protocols);
      } else {
        instance = new WebSocket(uri);
      }
      return instance;
    }

    if (WebSocket) ws.prototype = WebSocket.prototype;

    },{}],2:[function(require,module,exports){
    var WebSocket = require('ws')
      , ws = new WebSocket('ws://localhost:8080');
      console.log(ws);
    ws.on('open', function() {   //line that contains error
        var firstMessage = '{"type":"name","message":"Ayush"}';
        ws.send(firstMessage.toString());
    });
    ws.on('message', function(message) {
        console.log('received: %s', message);
    });
    },{"ws":1}]},{},[2]);

我的服务器代码

var WebSocketServer = require('ws').Server
  , wss = new WebSocketServer({port: 8080});

var index = 0;
var map = {};
wss.on('connection', function(ws) {
    map[index] = ws;
    var myindex = index;
    var username;
    index++;
    ws.on('message', function(message) {
        var json = JSON.parse(message);
        if(json.type == "name"){
            username = json.message;
            console.log(username);
        } else {
            //Print Message
        }
    });
    ws.send('something');

    ws.on('close', function(){
        console.log("Deleting index" + myindex);
        delete map[myindex];
    });
});

但是，当我使用 browserify 并使用我转换后的代码时，它在第 50 行抛出错误。

Uncaught TypeError: undefined is not a function on ws.open

Answer 1

ws 库建立在原始 TCP 套接字之上。出于安全原因，您不能在客户端 JavaScript 中使用它们，因此这是行不通的。您需要在浏览器中使用 WebSocket 构造函数。

唯一能够成功浏览器化的 node.js 库是那些不使用 node.js 标准库的库——文件系统、网络等。也就是说，像 underscore 和 async.

使 node.js 代码在浏览器中工作

Making node.js code work in browser

javascript

websocket

node.js