快速入門：使用輕觸或瀏覽的方式連接應用程式 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
當您使用鄰近性時，可以利用簡單的輕觸手勢或透過瀏覽無線範圍內的裝置，來建立兩個裝置之間的連線。您不需要連線至網路。只要同時輕觸兩部裝置，或使用 Wi-Fi Direct 連接。
大多數的裝置都必須具備 NFC，才能使用點選手勢在應用程式的兩個執行個體之間初始化連線。在電腦上，可透過藍牙、Wi-Fi Direct 或基礎結構網路進行此連線通道。在 Windows Phone 上，可透過藍牙或基礎結構網路建立連線。Windows Phone 不支援 Wi-Fi Direct。 這表示 Windows Phone 與電腦之間可以進行輕觸連線，但限制使用藍牙或基礎結構網路進行該通訊。
針對點選手勢，如果兩個含有鄰近性功能的裝置互相靠近到相距 3 到 4 公分，那麼鄰近性會通知這兩個系統。您可以使用輕觸，透過基礎結構網路、Wifi-Direct 或藍牙來設定長期的通訊通道。您的裝置必須安裝近距離無線通訊 (NFC) 硬體，才能夠使用點選手勢。您的無線介面卡必須支援 Wi-Fi Direct，才能夠使用 Wi-Fi Direct 瀏覽。
您也可以使用鄰近性，設定無線範圍內與對等應用程式的長期通訊通道。
這個主題顯示如何使用鄰近性，建立對等應用程式 (例如遊戲)、共用內容的應用程式等等之間的連線。
這個主題的範例說明如何使用鄰近性和 PeerFinder 類別，來建立與其他裝置上對等應用程式的長期通訊端連線。
至於透過輕觸觸發的連線，如果對等應用程式未在目標裝置的前景中執行，鄰近性會邀請使用者啟動目標電腦上的應用程式。如果目標裝置未安裝對等應用程式，則鄰近性會邀請目標裝置上的使用者從 Windows 市集安裝應用程式。如需使用點選手勢啟動應用程式的其他詳細資料，請參閱支援鄰近性和點選中的＜使用鄰近性啟動應用程式＞。
目標: 使用鄰近性輕觸或無線瀏覽，建立兩個裝置的連線。
先決條件
Microsoft Visual Studio Express 2012 for Windows 8
指示
1. 建立新專案和啟用鄰近性功能
- 開啟 Visual Studio Express 2012 for Windows 8，然後選取 [檔案] 功能表中的 [新增專案]。在 [Javascript] 區段中，選取 [空白的應用程式]。將應用程式命名為 ProximityConnect，然後按一下 [確定]。
- 開啟 Package.appxmanifest 檔案，然後選取 [功能]**** 索引標籤。選取 [鄰近性] 功能以啟用鄰近性。關閉並儲存資訊清單檔案。
2. 新增 HTML UI
開啟 Default.html 檔案，然後將下列的 HTML 新增到 <body> 區段。
<div style="position:absolute;margin:0">
Display Name: <input type="text" id="displayNameTextBox" style="width:300px" />
<button id="advertiseForPeersButton">Advertise for a Connection</button>
<button id="acceptButton">Accept Connection</button>
<button id="findPeersButton">Browse for Peers</button>
<button id="stopFindingPeersButton">Stop Browsing for Peers</button><br />
<input id="sendMessageText" type="text" style="width:200px" />
<button id="sendMessageButton">Send Message</button><br />
<div id="messageDiv" style="position:relative;width:600px"></div>
</div>
3. 新增初始化程式碼
這個步驟中的程式碼會將函式與 HTML 按鈕的 Click 事件產生關聯。這些函式將在後續步驟中新增為事件處理常式。在此包含 id 捷徑函式，以方便存取 getElementById 函式。
開啟 js 資料夾。開啟 Default.js 檔案，然後用下列程式碼取代預設的 activated 函式。
app.onactivated = function (args) {
if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
id("advertiseForPeersButton").addEventListener("click", advertiseForPeers);
id("acceptButton").addEventListener("click", acceptConnection);
id("findPeersButton").addEventListener("click", findPeers);
id("stopFindingPeersButton").addEventListener("click", stopFindingPeers);
displayNameTextBox.value = Windows.Networking.Proximity.PeerFinder.displayName;
Windows.Networking.Proximity.PeerFinder.addEventListener("connectionrequested", connectionRequested);
// Detect if app launched from a tap.
if ((args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) &&
(args.detail.arguments === "Windows.Networking.Proximity.PeerFinder:StreamSocket")) {
advertiseForPeers(true);
}
args.setPromise(WinJS.UI.processAll());
}
};
function id(elementId) {
return document.getElementById(elementId);
}
4. 新增程式碼以連線到對等應用程式
在這個步驟中，您要新增按鈕的 Click 事件程式碼。您也可以新增寫入 UI 執行緒的方法。advertiseForPeersButton 按鈕的事件處理常式程式碼會設定本機裝置的對等名稱，並啟動 PeerFinder。如果觸發的連線會受到支援 (輕觸)，程式碼便會識別出 triggeredConnectionStateChanged 事件的事件處理常式。在 triggeredConnectionStateChanged 事件處理常式中，程式碼會開啟資料流通訊端，在對等應用程式之間傳送文字訊息。
FindPeersButton 按鈕的事件處理常式程式碼會呼叫 findAllPeersAsync 方法，以瀏覽無線範圍內的裝置。找到一或多個對等應用程式時，範例就會呼叫 connectAsync 方法，以連線到第一個找到的對等應用程式。這只供示範之用。您應該提供一份可能的對等應用程式清單供使用者選擇，然後連線至使用者選擇的對等應用程式。
程式碼會包含 connectionRequested 事件的事件處理常式，此事件會在對等應用程式藉由呼叫 connectAsync 方法來開啟與您的連線時發生。您可以按一下 [接受連線] 按鈕接受連線。
stopFindingPeersButton 按鈕的事件處理常式程式碼會呼叫 Stop 方法。不論是透過無線連線或是使用點選手勢來連線，這個方法都會讓事件處理常式停止宣告和瀏覽對等應用程式。
在 Default.js 檔案中，將下列程式碼新增到 id 函式之後。
var started = false;
// Click event for "Advertise" button.
function advertiseForPeers(launchedFromTap) {
Windows.Networking.Proximity.PeerFinder.displayName = displayNameTextBox.Text;
if (Windows.Networking.Proximity.PeerFinder.supportedDiscoveryTypes &
Windows.Networking.Proximity.PeerDiscoveryTypes.triggered) {
Windows.Networking.Proximity.PeerFinder.addEventListener(
"triggeredconnectionstatechanged", triggeredConnectionStateChanged);
id("messageDiv").innerHTML +=
"You can tap to connect a peer device that is " +
"also advertising for a connection.<br />";
} else {
id("messageDiv").innerHTML +=
"Tap to connect is not supported.<br />";
}
if (!launchedFromTap) {
if (!(Windows.Networking.Proximity.PeerFinder.SupportedDiscoveryTypes &
Windows.Networking.Proximity.PeerDiscoveryTypes.Browse)) {
id("messageDiv").innerHTML +=
"Peer discovery using Wi-Fi Direct is not supported.<br />";
}
}
if (!started) {
Windows.Networking.Proximity.PeerFinder.start();
started = true;
}
}
function triggeredConnectionStateChanged(e) {
if (e.state === Windows.Networking.Proximity.TriggeredConnectState.peerFound) {
id("messageDiv").innerHTML +=
"Peer found. You may now pull your devices out of proximity.<br />";
}
if (e.state === Windows.Networking.Proximity.TriggeredConnectState.completed) {
id("messageDiv").innerHTML += "Connected. You may now send a message.<br />";
sendMessage(e.socket);
}
}
// Click event for "Browse" button.
function findPeers() {
if (Windows.Networking.Proximity.PeerFinder.supportedDiscoveryTypes &
Windows.Networking.Proximity.PeerDiscoveryTypes.browse) {
Windows.Networking.Proximity.PeerFinder.findAllPeersAsync().done(
function (peerInfoCollection) {
if (peerInfoCollection.length > 0) {
// Connect to first peer found - example only.
// In your app, provide the user with a list of available peers.
connectToPeer(peerInfoCollection[0]);
}
},
function (err) {
id("messageDiv").innerHTML += "Error finding peers: " + err + "<br />";
});
} else {
id("messageDiv").innerHTML +=
"Peer discovery using Wi-Fi Direct is not supported.<br />";
}
}
function connectToPeer(peerInfo) {
id("messageDiv").innerHTML += ("Peer found. Connecting to " + peerInfo.displayName + "<br />");
Windows.Networking.Proximity.PeerFinder.connectAsync(peerInfo).done(
function (socket) {
id("messageDiv").innerHTML += "Connection successful. You may now send messages.<br />";
sendMessage(socket);
},
function (err) {
id("messageDiv").innerHTML += "Connection failed: " + err + "<br />";
});
requestingPeer = null;
}
function stopFindingPeers() {
Windows.Networking.Proximity.PeerFinder.stop();
started = false;
if (proximitySocket != null) { closeSocket(); }
}
// Handle external connection requests.
var requestingPeer;
function connectionRequested(e) {
id("messageDiv").innerHTML +=
"Connection requested by " + e.peerInformation.DisplayName + ". " +
"Click 'Accept Connection' to connect.";
requestingPeer = e.PeerInformation;
}
function acceptConnection() {
if (requestingPeer == null) {
id("messageDiv").innerHTML += "No peer connection has been requested.";
return;
}
connectToPeer(requestingPeer);
}
5. 新增程式碼以使用 ProximityStreamSocket 傳送和接收訊息
成功建立連線時，程式碼會將連線所建立的 ProximityStreamSocket 物件傳送到 sendMessage 函式。sendMessage 函式會開啟與鄰近性裝置的網路連線，讓您能夠來回傳送訊息。請確定一律會在完成時呼叫 ProximityStreamSocket 物件的 close 方法。
在 Default.js 檔案中，將下列程式碼新增到 connectToPeer 函式之後。
var proximitySocket;
var dataWriter;
// Reference socket streams for writing and reading messages.
function sendMessage(socket) {
id("sendMessageButton").addEventListener("click", sendMessageText);
// Get the network socket from the proximity connection.
proximitySocket = socket;
// Create DataWriter for writing messages to peers.
dataWriter = new Windows.Storage.Streams.DataWriter(proximitySocket.outputStream);
// Listen for messages from peers.
var dataReader = new Windows.Storage.Streams.DataReader(proximitySocket.inputStream);
startReader(proximitySocket, dataReader);
}
// Send a message to the socket.
function sendMessageText() {
var msg = id("sendMessageText").value;
if (msg.length > 0) {
var msgLength = dataWriter.measureString(msg);
dataWriter.writeInt32(msgLength);
dataWriter.writeString(msg);
dataWriter.storeAsync().done(
function (byteCount) {
if (byteCount > 0) {
id("messageDiv").innerHTML += "Message sent: " + msg + "<br />";
} else {
id("messageDiv").innerHTML += "The remote peer closed the socket.";
closeSocket();
}
},
function (err) {
id("messageDiv").innerHTML += "Send error: " + err.message + "<br />";
closeSocket();
});
}
}
// Read out and print the message received from the socket.
function startReader(socket, reader) {
var initialLength = 4;
reader.loadAsync(initialLength).done(
function (byteCount) {
if (byteCount > 0) {
var msgLength = reader.readInt32();
reader.loadAsync(msgLength).done(
function (byteCount) {
if (byteCount > 0) {
var message = reader.readString(msgLength);
id("messageDiv").innerHTML += "Received message: " + message + "<br />";
// After receiving a message, listen for the next message.
startReader(socket, reader);
}
else {
id("messageDiv").innerHTML += "The remote peer closed the socket.";
closeSocket();
}
},
function (err) {
id("messageDiv").innerHTML += "Receive error: " + err.message + "<br />";
reader.close();
});
}
else {
id("messageDiv").innerHTML += "The remote peer closed the socket.";
reader.close();
}
},
function (err) {
id("messageDiv").innerHTML += "Receive error: " + err.message + "<br />";
reader.close();
});
}
function closeSocket() {
if (proximitySocket) {
proximitySocket.close();
proximitySocket = null;
}
if (dataWriter) {
dataWriter.close();
dataWriter = null;
}
}
6. 執行應用程式
若要檢視執行中的應用程式，請在兩部啟用鄰近性的裝置上執行該應用程式。接著，按一下這兩個應用程式上的 [宣告連線] 按鈕，然後一起輕觸這兩部裝置。如果兩部裝置都有 Wi-Fi Direct，您可以不用輕觸，而是按一下其中一部裝置上的 [瀏覽對等應用程式]**** 建立連線。
重要
您必須在兩部裝置上執行這個快速入門。對於使用點選手勢的情況，每部裝置都必須安裝鄰近性裝置，例如近距離無線通訊 (NFC) 無線電波。對於使用無線瀏覽的情況，您需要兩部已啟用 Wi-Fi Direct 的電腦，或是兩部已啟用藍牙的 Windows Phone。如果您沒有支援鄰近性輕觸 (例如 NFC 無線電波) 的硬體，則可使用鄰近性驅動程式範例，這個範例是 Windows 驅動程式套件 (WDK) 範例的一部分。您可以使用範例驅動程式，在兩部裝置之間透過網路連線模擬點選手勢。如需如何下載 WDK 的相關資訊，請參閱 Windows 驅動程式套件 (WDK)。安裝 WDK 和範例之後，您就可以在安裝 WDK 範例的位置 src\nfp 目錄中找到鄰近性驅動程式範例。如需建置和執行模擬器的指示，請參閱 src\nfp\net 目錄中的 NetNfpProvider.html 檔案。啟動模擬器之後，當您的鄰近性應用程式在前景中執行時，該模擬器便會在背景中執行。您的應用程式必須位於前景中，輕觸模擬才能運作。
摘要與後續步驟
在這個教學課程中，您建立一個使用點選手勢或無線瀏覽方式連線裝置的應用程式。
您也可以使用點選手勢發佈和訂閱訊息。如需範例，請參閱使用輕觸來發佈和訂閱訊息。
相關主題
Windows.Networking.Proximity namespace
範例