处理需要通过套接字发送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组件文件中。更改主要涉及通过HTML按钮触发的套接字连接将数据从HTML文本字段(绑定data
参数中包含的默认文本)传递到侦听服务器。但是我现在还没有超越按钮触发器。
我得到的是: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会破坏该行(两个窗口中代码中<---
标记的位置)。
不知何故,我认为这与Unexpected "Uncaught TypeError: XXX is not a constructor" errors with Babel and ES6有关,但在 的情况下,解决方案围绕在require语句中添加访问默认属性。我不确定如何在vue组件中使用import
完成相同的操作。
任何朝着正确方向的刺激都会受到赞赏。