Chrome APP(插件) 实现 UDP TCP TCPServer 案例

1、案例目录

• manifest.json（最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录）。
• index.js 应用的后台脚本。

2、案例代码

manifest.json：

{
	"name": "dome",
	"version": "0.1",
	"manifest_version": 2,
	"minimum_chrome_version": "23",
	"app": {
		"background": {
			"scripts": [
				"index.js"
			]
		}
	},
	"sockets": {
		"tcpServer": {
			"listen": ":8060"
		},
		"tcp": {
			"connect": "127.0.0.1:3000"
		},
		"udp": {
			"send": [
				"127.0.0.1:8000",
				":8001"
			],
			"bind": ":8000"
		}
	}
}

index.js：

var serverSocketId;
var tcpSocketId;
var udpSocketId;

function ab2str(buf) {
	return String.fromCharCode.apply(null, new Uint8Array(buf));
}

//APP运行时执行方法
chrome.app.runtime.onLaunched.addListener(function() {
	//创建tcpServer方法
	chrome.sockets.tcpServer.create({}, function(createInfo) {
		tcpServerlistenAndAccept(createInfo.socketId);
	});

	//创建tcp方法
	chrome.sockets.tcp.create({}, function(createInfo) {
		tcpAccept(createInfo.socketId);
	});

	////创建udp方法
	chrome.sockets.udp.create({}, function(socketInfo) {
		udpAccept(socketInfo.socketId);
	});
});

function tcpServerlistenAndAccept(socketId) {
	//指定tcpServer的IP、端口号和回调
	chrome.sockets.tcpServer.listen(socketId,
		"127.0.0.1", 8060,
		function(resultCode) {
			tcpServerOnListenCallback(socketId, resultCode)
		});
}

function tcpServerOnListenCallback(socketId, resultCode) {
	if(resultCode < 0) {
		console.log("tcpServer失败:",socketId);
		return;
	}
	console.log("tcpServer成功-", socketId);
	//唯一标识
	serverSocketId = socketId;
	chrome.sockets.tcpServer.onAccept.addListener(tcpServerOnAccept)
}

function tcpServerOnAccept(info) {
	if(info.socketId != serverSocketId) return;

	const data = new Uint8Array([0,1,2]);
	//发送数据 只能是buffer
	chrome.sockets.tcp.send(info.clientSocketId, data,
		function(resultCode) {
			console.log("Data sent to new TCP client connection.")
		});

	//收到的消息
	chrome.sockets.tcp.onReceive.addListener(function(recvInfo) {
		if(recvInfo.socketId != info.clientSocketId) return;

		console.log("tcpServer收到消息----", ab2str(recvInfo.data));
	});

	chrome.sockets.tcp.setPaused(info.clientSocketId, false);
}

function tcpAccept(socketId) {
	chrome.sockets.tcp.connect(socketId, "127.0.0.1", 3000, function(resultCode) {
		tcpOnListenCallback(socketId, resultCode);
	});
}

function tcpOnListenCallback(socketId, resultCode) {

	if(resultCode < 0) {
		console.log("tcp失败:",socketId);
		return;
	}
	console.log("tcp成功-", socketId);
	tcpSocketId = socketId;
	const data = new Uint8Array([0,1,2]);
	//发送数据 只能是buffer
	chrome.sockets.tcp.send(socketId, data,
		function(resultCode) {
			console.log("Data sent to new TCP client connection.")
		});
	chrome.sockets.tcp.onReceiveError.addListener(function(info) {
		console.log("tcpOnReceiveError:", info.socketId, info.resultCode);
	});
	//收到的消息
	chrome.sockets.tcp.onReceive.addListener(tcpReceive);
	
}

function tcpReceive(info) {
	if(info.socketId != tcpSocketId) return;
	console.log("tcp收到消息----", ab2str(info.data));

}

function udpAccept(socketId) {
	chrome.sockets.udp.bind(socketId, "127.0.0.1", 8000, function(resultCode) {
		udpOnListenCallback(socketId, resultCode);
	});
}

function udpOnListenCallback(socketId, resultCode) {
	if(resultCode < 0) {
		console.log("upd失败:",socketId);
		return;
	}
	console.log("upd成功-", socketId);
	udpSocketId = socketId;
	const data = new Uint8Array([0,1,2]);
	//UDP发送消息
	chrome.sockets.udp.send(socketId, data, '127.0.0.1', 8001, function(sendInfo) {
		console.log("sent " + sendInfo.bytesSent);
	});

	chrome.sockets.udp.onReceive.addListener(udpReceive);
}

function udpReceive(info) {
	if(info.socketId !== udpSocketId) return;
	console.log("udp收到消息----", ab2str(info.data));
};

chrome.runtime.onSuspend.addListener(function() {
	//APP退出时执行方法
	chrome.sockets.tcpServer.onAccept.removeListener(tcpServerOnAccept);
	console.log(serverSocketId);
	chrome.sockets.tcpServer.disconnect(serverSocketId);
	
	chrome.sockets.tcp.disconnect(tcpSocketId);

	chrome.sockets.udp.disconnect(udpSocketId);
});

3、如何运行

1. 打开谷歌浏览器 -> 更多工具 -> 扩展程序 -> 加载已解压的扩展程序
2. 进入chrome://apps/ 单击自己编写的APP

4、运行结果

5、总结

此文只是一个简单的案例展示，案例中的配置项和使用到的API不做过多讲解，如想深入学习谷歌插件请自行学习，下面列出一些网上收集的学习资料：

www.wenjiangs.com/doc/u0prwyr…

www.dgrt.cn/news/show-3…

developer.chrome.com/apps/app_ne…