[英]WebSockets via browser on React + NodeJS
我正在構建一個 websocket 聊天服務,在 NodeJS 上運行。 它已經在終端上運行,如果您想嘗試,請檢查終端客戶端 package。 https://www.npmjs.com/package/@redstone-solutions/hackerchat-client
它在終端上運行良好,現在我正在開發一個 package 來集成 web 應用程序(javascript、react 等),但我無法通過瀏覽器連接到 ZBF56D570E62CDB573C86B1852629617。
基本上,這就是 websocket 創建的后端:(我沒有使用 socket.io,唯一的依賴是 uuid)
async initialize(eventEmitter: NodeJS.EventEmitter): Promise<http.Server> {
const server = http.createServer((request: http.IncomingMessage, response: http.ServerResponse) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Request-Method', '*');
response.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
response.setHeader('Access-Control-Allow-Headers', '*');
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('Hacker chat server is running!\n\nPlease connect with websocket protocol.')
})
server.on('upgrade', (request, socket) => {
socket.id = uuid()
const headers = [
'HTTP/1.1 101 Web Socket Protocol Handshake',
'Upgrade: WebSocket',
'Connection: Upgrade',
''
]
.map(line => line.concat('\r\n'))
.join('')
socket.write(headers)
eventEmitter.emit(EventTypes.event.NEW_USER_CONNECTED, socket)
})
return new Promise((resolve, reject) => {
server.on('error', reject)
server.listen(this.port, () => resolve(server))
})
}
這是我對新反應應用程序的嘗試,我使用的方式與在終端客戶端上使用的方式相同。
function App() {
useEffect(() => {
async function run() {
const componentEmitter = new Events()
const connection = await createConnection()
console.log(connection)
}
run()
}, [])
async function createConnection() {
const options = {
port: '9898',
host: 'localhost',
headers: {
Connection: 'Upgrade',
Upgrade: 'websocket'
}
}
const request = http.request(options)
request.end()
return new Promise(resolve => {
request.once('upgrade', (response, socket) => resolve(socket))
})
}
return <div />
}
該請求永遠不會在反應應用程序上升級。 console.log(connection) 永遠不會被調用。
我不確定我是否使用了與瀏覽器不兼容的資源(例如 http package)...
如果您需要完整的代碼,應用程序非常簡單/小:
https://github.com/redstone-solutions/hackerchat-server
https://github.com/redstone-solutions/hackerchat-terminal-client
任何想法?
我找到了一種連接套接字的方法,但我需要重組我的應用程序。
const server = new WebSocket('ws://localhost:9898')
使用來自 JavaScript 的原生 WebSocket API,我可以建立連接。
使用 http 庫,請求永遠不會升級,我相信這個庫不能在瀏覽器上完全工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.