首頁猿問使用 fetch api 時使用...

使用 fetch api 時使用 socket.io 廣播消息

JavaScript

白豬掌柜的 2022-12-09 15:04:43

我正在使用 fetch api 發布和檢索用戶數據，效果很好，但我也想將 sioket.io 實現到 fetch 中，以從 mysql 數據庫發出和廣播我選擇的數據。服務器端：var server = require('http').createServer(app);var io = require('socket.io')(server);app.use(function(request, result, next) { result.setHeader("Access-Control-Allow-Origin", "*"); next();})dotenv.config({ path: './.env' });var sqlDatabase = mysql.createConnection({ host: process.env.DATABASE_HOST, user: process.env.DATABASE_USER, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE,});app.set('view engine', 'hbs');app.use(express.urlencoded({ extended: false }));app.use(express.json());app.use(cookieParser('key cat'));app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));app.use(expressValidator());app.use(cors());const publicDirectory = path.join(__dirname, './public')app.use(express.static(publicDirectory));var options = { host: process.env.DATABASE_HOST, user: process.env.DATABASE_USER, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE,};var sessionStore = new MySQLStore(options);app.use(session({ secret: 'key cat', resave: false, saveUninitialized: false, store: sessionStore, cookie: { httpOnly: true, secure: false, maxAge: 60000 }}));app.use(passport.initialize());app.use(passport.session());sqlDatabase.connect((err) => { if (err) { console.log(err); } else { console.log('mysql is connected') }});io.on('connection', (socket) => { console.log('socket connect successful'); socket.on('new_message', function(results) { console.log('Client says', results); })如果我使用result.end(JSON.stringify(results));結果很好，除了我還想發射和廣播數據，這就是我使用 sioket.io 的原因。

查看完整描述

1 回答

慕標5832272

TA貢獻1966條經驗獲得超4個贊

服務器端：

io.on('connection', (socket) => {

console.log('socket connect successful');

socket.on('new_message', function(message) {

console.log('Client says', message);

io.emit('new_message', message)

})

app.get("/get_messages", function(request, result) {

sqlDatabase.query("SELECT users.username, comments.comments, comments.date FROM users INNER JOIN comments ON users.user_id=comments.user_id",

function(error, results) {

result.end(JSON.stringify(results));

});

客戶端

function loadcomments() {

fetch('http://localhost:5502' + '/get_messages')

.then(response => {

if (response.ok) {

console.log('success')

console.log(response);

} else {

console.log('failure')

}

return response.json();

})

.then(function(data) {

io.emit("new_message", data)

io.on("new_message", function(data) {

console.log("Server says", data);

output.innerHTML = '';

data.forEach(function(user) {

var newUser = document.createElement("div");

var newName = document.createElement("h5");

var newDate = document.createElement("h5");

var newMessage = document.createElement("h6");

var display_username = document.createTextNode(JSON.stringify(user.username));

var display_date = document.createTextNode(JSON.stringify(user.date));

var display_comments = document.createTextNode(JSON.stringify(user.comments));

newName.appendChild(display_username);

newDate.appendChild(display_date);

newMessage.appendChild(display_comments);

newUser.appendChild(newName);

newUser.appendChild(newDate);

newUser.appendChild(newMessage);

output.appendChild(newUser);

請注意我如何構建這部分：

.then(function(data) {

io.emit("new_message", data)

io.on("new_message", function(data) {

console.log("Server says", data);

output.innerHTML = '';

data.forEach(function(user) {

var newUser = document.createElement("div");

我遇到的問題是我一直在數據庫中獲取第一個條目作為輸出并重復。放置這個

io.emit("new_message", data);

io.on("new_message", function(data) {

在此之上：

output.innerHTML = '';

data.forEach(function(user) {

解決了問題。

反對回復 2022-12-09

1 回答
0 關注
110 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 fetch api 時使用 socket.io 廣播消息

使用 fetch api 時使用 socket.io 廣播消息

1 回答

添加回答