1

处理需要通过套接字发送 JSON 对象的小型 Node.js 项目。我发现 JsonSocket ( https://github.com/sebastianseilund/node-json-socket ) 可以满足我的需求，并且运行该作者提供的简单服务器/客户端演示效果很好。

我正在将演示客户端代码 ( https://github.com/sebastianseilund/node-json-socket#simple-clientserver-example ) 改编为Vue.js-Babel-Browserify项目框架并将代码放在 .vue 组件中文件。data更改主要涉及通过由 HTML 按钮触发的套接字连接将数据从 HTML 文本字段（绑定参数中包含的默认文本）传递到侦听服务器。但此时我并没有超越按钮触发器。

我得到的是：Uncaught TypeError: _net2.default.Socket is not a constructor使用此转译代码通过套接字发送数据时：var socket = new _jsonSocket2.default(new _net2.default.Socket());

以下是原始 .vue 代码：

import net from 'net'
import JsonSocket from 'json-socket'

export default {
  data () {
    return {
      header: 'Login',
      messageStuff: '{ "cmd": "send", "what": { "this": "that" } }'
    }
  },
  methods: {
    submitMessage() {
      var stuff = JSON.parse(this.messageStuff)
      var port = 8069
      var host = '192.168.11.5'

      var socket = new JsonSocket(new net.Socket())  <-- *** source of the culprit!  ***
      socket.connect(port, host)

      socket.on('connect', function () {
        socket.sendMessage(stuff)
        socket.on('message', function (message) {
          console.log('Server replies...')
          console.dir(message)
        })
      })
    }
  }
}

这是脚本相关部分的转译代码：

    var _net = require('net');
    var _net2 = _interopRequireDefault(_net);
    var _jsonSocket = require('json-socket');
    var _jsonSocket2 = _interopRequireDefault(_jsonSocket);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    exports.default = {
      data: function data() {
        return {
          header: 'Login',
          messageStuff: '{ "cmd": "send", "what": { "this": "that" } }'
        };
      },

      methods: {
        submitMessage: function submitMessage() {
          var stuff = JSON.parse(this.messageStuff);
          var port = 8069;
          var host = '192.168.11.5';

          var socket = new _jsonSocket2.default(new _net2.default.Socket()); <-- ***  the culprit!  ***
          socket.connect(port, host);

          socket.on('connect', function () {
            socket.sendMessage(stuff);
            socket.on('message', function (message) {
              console.log('Server says...');
              console.dir(message);
            });
          });
        }
      }
    };
    })()

不知道为什么 Babel 破坏了这条线（<---标记在两个窗口的代码中）。

不知何故，我觉得这与 Babel 和 ES6 的 Unexpected "Uncaught TypeError: XXX is not a constructor" 错误有关，但在这种情况下，解决方案围绕在 require 语句中添加访问默认属性。我不确定如何import在 vue 组件内部完成同样的任务。

任何朝着正确方向的刺激都将不胜感激。

4

0 回答 0