room機能を使いつつif文を使って、ウインドウ生成なしで同じルームでも違う画面が見えるようにしたい。

Question

私は今通信対戦ができるボードゲームを作っているのですが、過去の質問でサンプルプログラムをもらいました。そのサンプルでは遷移の指定が書かれていなかったので、遷移の指定を追加したりと自分なりに模索していたのですが、元々ページ遷移指定の条件分岐に使いたかったdocument.location
が使えず仕方なく
window.open
でウインドウ生成ありのページ遷移で動作確認を行おうとしたところ、
ポップアップブロックというものが出てきてしまいました。
一体何が原因なのかわからないのでご教授願いたいです。

実現したいこと

下記に表示するサンプルにウインドウ生成なしで条件分岐させたいです。
最終的のこのサンプルは本プログラムに生かしていこうと思っています。

発生している問題・エラーメッセージ

window.openで開こうとした際にいかのような表示が出ます。ポップアップを使った記憶はないです。

該当のソースコード

今回のサンプルです。

// app.js
const express = require("express")
const { createServer } = require("http")
const { Server } = require("socket.io")

const app = express()
const httpServer = createServer(app)
const io = new Server(httpServer, { /* options */ })
const port = 3000

app.set("view engine", "pug")

app.get("/", (req, res) => {
    res.render("index", { title: "Hey", message: "Hello there!" })
})

app.get("/window1", (req, res) => {
    res.render("window1")
})

app.get("/1", (req, res) => {
    res.render("test1")
})

app.get("/2", (req, res) => {
    res.render("test2")
})

const socketPerRoom = 2
let socketCount = 0

io.on("connection", (socket) => {
    console.log(`connection socket.id: ${socket.id}`)
    socket.on("join", () => {
        socketCount++
        const room = `room${Math.ceil(socketCount / socketPerRoom)}`
        const num = socketCount % 2
        // ソケットをルームに追加する
        socket.join(room)
        console.log(`join socket.id: ${socket.id}, socket.rooms: ${JSON.stringify([...socket.rooms])}`)
        // ルーム全体に送信する(最大2つのソケット)
        io.to(room).emit("joined", socket.id, room, num)
    })
})

httpServer.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

//- views/index.pug
html
    head
        title= title
        script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
    body
        h1= message
        input(type="button", value="join", id="button1")
        ul(id="ul1" style="list-style: none;")
        script.
            window.addEventListener("DOMContentLoaded", () => {
                const button1 = document.querySelector("#button1")
                button1.addEventListener("click", () => {

                     //- Socket.IO接続
                    const socket = io()
                    socket.on("connect", () => {
                        //- 接続した時のイベント
                        //- ソケットのIDをコンソールと画面のリストに出力する
                        console.log(`connect: ${socket.id}`)
                        const li1 = document.createElement('li')
                        //- li1.textContent = `connect socket.id: ${socket.id}`
                        const ul1 = document.querySelector("#ul1")
                        ul1.append(li1)
                    })
                    socket.on("disconnect", () => {
                        console.log(`disconnect: ${socket.id}`)
                    })
                    socket.on("joined", (socketId, room, flg) => {
                        //- ルームに追加した時のイベント
                        //- ルームに追加されたソケットのIDとルームの名前をコンソールと画面のリストに出力する
                        console.log(`joined socketId: ${socketId}, room: ${room}`)
                        const li1 = document.createElement('li')
                        //- li1.textContent = `joined socketId: ${socketId}, room: ${room}, flg: ${flg}`
                        const ul1 = document.querySelector("#ul1")
                        ul1.append(li1)

                        if(flg == 1){
                            window.open("/1", "_blank") 
                            //- window.close()                                                      
                        }else if(flg == 0){
                            window.open("/2", "_blank")
                            //- window.close()                            
                        }
                    })
                    //- サーバーに送信する(ルームに追加するためのイベント)
                    socket.emit("join")
                    })
            })

Answer 1

pugファイルの

if(flg == 1){
                            window.open("/1", "_blank") 
                            //- window.close()                                                      
                        }else if(flg == 0){
                            window.open("/2", "_blank")
                            //- window.close()                            
                        }

を、

if(flg == 1){
                            window.location.href = "/1";                                                     
                        }else if(flg == 0){
                            window.location.href = "/2";                            
                        }

変えるだけ！

Answer 2

window.openは副ウィンドウを開くメソッドの様です（参考）。一種のポップアップと考えて良いと思いますので、これがブラウザの機能によりブロックされたのだと思います。

document.locationが使えないとのことですが、画面遷移には通常window.locationを利用しますのでお試しください👍

Comments

[mariko68311]

すみません、window.openをwindow.locationに変えたのですが一切反応しませんでした。一体何がいけなかったのでしょうか、どこか書き換えないと使えないのでしょうか？

[yuta_22]

「window.location 画面遷移」等で検索をかけていただくとたくさん記事がヒットしますので、まずはwindow.locationの使い方が正しいか確認してみてください☺️

それでも解決しない様でしたらソースコードや（エラーが出ていれば）エラー内容等と一緒にご連絡ください！🙇‍♂️

[mariko68311]

わかりました、ありがとうございます！

[mariko68311]

if(flg == 1){
window.location.href = "/1";
}else if(flg == 0){
window.location.href = "/2";
}
と記述したら動きました！回答ありがとうございました！

[yuta_22]

おぉよかったです〜〜！