發送 socket.io 實例來表達路由
[英]Sending socket.io instance to express route
問題描述
我正在嘗試創建一個 nodejs 應用程序，該應用程序將使用其 API 在各種網站中進行搜索。 使用 socket.io 從這些 API 接收結果后，結果將立即發送到客戶端。 然后前端將使用 jQuery 添加這些結果。
實現這一點的最佳方法是什么？
到目前為止，我已經嘗試過：
示例代碼 1
起初，我為 express 創建了一個中間件，將套接字添加到請求中，例如 -
var socketMiddleWare = function(req, res, next){
io.on('connection', function(socket){
console.log(io.engine.clientsCount + " clients connected.");
req.socket = socket;
socket.on('disconnect', function(){
console.log(io.engine.clientsCount + " clients after disconnec.");
});
});
next();
};
然后將此中間件添加到我的路線中 -
app.use('/users', socketMiddleWare, users);
它有效，但問題是每次用戶刷新頁面時它都會創建多個事件偵聽器。
示例代碼 2
然后我嘗試了（示例代碼）
io.on('connection', function(socket){
console.log("user connected");
global.socket = socket;
socket.on('disconnect', function(){
console.log("disconnect");
});
socket.on('my message', function(){
console.log("My message received");
});
});
在我的測試路線上我做了
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
if(socket){
socket.emit('response', 'nothing');
}
res.render('index', { title: 'Express' });
});
module.exports = router;
它解決了之前刷新時多個事件偵聽器的問題，但大多數時候它無法發出響應。 即使它發出我的瀏覽器也無法顯示結果。 在客戶端我做了這樣的事情 -
var socket = io.connect('http://localhost');
socket.on('response', function(data){
console.log(data);
document.getElementById("change").innerHTML += data;
});
我可以在瀏覽器控制台中看到響應，但我的瀏覽器在更改消失之前會顯示幾毫秒的更改。
我認為主要問題是在建立套接字連接之前加載頁面。
我目前正在學習 node.js 和 socket.io。 所以請幫助我。
結論
我確實計划在未來使用 socket.io 添加社交網絡功能，例如一對一消息、主頁上的實時好友動態更新等。 請讓我知道是否有任何好的文檔或開源項目可以幫助我實現它。
我正在尋找過去幾天的解決方案，但到目前為止還沒有運氣。 我准備學習任何新方法或完全重寫我的代碼。
TL; 博士
當用戶客戶端搜索項目時，當新數據可用時，將內容推送到請求內容的客戶端。 在處理來自“電影數據庫”和“ TheTVDB.com ”等網站的響應后，可以通過它們的 API 獲得數據。
1 個解決方案
解決方案1
1 已采納 2016-04-27 12:14:39
您可以使用套接字的 ID 來跟蹤要將結果發送到哪個套接字。
客戶
當用戶隨后搜索某些內容時，該 ID 將包含在查詢參數中。
<body>
<form>
<!-- Disable the search bar until the socket is connected -->
<input type="search" name="q" placeholder="Search" disabled>
</form>
<div id="results"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
var resultsElement = document.querySelector("#results");
var search = document.querySelector("form [type=search]");
var socket = io("http://localhost:3000");
socket.on("connect", function(){
search.disabled = false;
});
socket.on("results", function(results){
for(var i = 0;i < results.length;i++){
var result = document.createElement("div");
result.textContent = results[i];
resultsElement.appendChild(result);
}
});
document.querySelector("form").addEventListener("submit", function(event){
fetch("/search?socketID=" + encodeURIComponent(socket.id) + "&q=" + encodeURIComponent(search.value));
event.preventDefault();
});
</script>
</body>
服務器
當服務器收到搜索請求時，它使用查詢參數中發送的套接字 ID 獲取套接字，並開始將結果發送回客戶端。
var app = require("http").createServer(handler);
var io = require("socket.io")(app);
var fs = require("fs");
var url = require("url");
app.listen(3000);
function handler(req, res) {
var query = url.parse(req.url, true).query;
if(req.url.startsWith("/search")){
var results = ["things", "stuff", "items"];
// Server-side IDs have "/#" in front of them
var socket = io.sockets.connected["/#" + query.socketID];
if(socket){
// Get and send "search results"
var interval = setInterval(function(){
var popped = results.pop();
if(popped){
socket.emit("results", [query.q + " " + popped]);
}else{
clearInterval(interval);
}
}, 1000);
}
res.writeHead(204);
res.end();
}else{
fs.readFile(__dirname + "/index.html", function(err, data) {
res.writeHead(200);
res.end(data);
});
}
}
Socket.IO在Express 4路由上發出
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.