如何使用express服务器将socket.io连接到Sapper应用程序？
如何使用express服务器将socket.io连接到Sapper应用程序？
提问于 2020-07-31 11:40:11
问题所在
我正在尝试使用express和webpack在Sapper应用程序上启动和运行socket.io。我的网站服务正常，没有错误，但是当我尝试通过socket.io连接前端时，它就抛出了404s。
我认为我遇到的问题是socket.io需要截取/socket.io请求(similar to this issue)，但是Sapper似乎不允许这样做。据我所知，我们可以在应用sapper中间件之前注册路由，但socket.io不是中间件。
我已经用我的设置here的副本创建了一个公共存储库
我可以在chrome的网络选项卡中看到正在发出请求(大约每秒一个)，但响应是默认的_error.svelte 404页面：
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta name='theme-color' content='#333333'>
<base href="/">
<link rel='stylesheet' href='global.css'>
<link rel='manifest' href='manifest.json' crossorigin='use-credentials'>
<link rel='icon' type='image/png' href='favicon.png'>
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->
<style>main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:white;padding:2em;margin:0 auto;box-sizing:border-box}
nav.svelte-1dbd5up{border-bottom:1px solid rgba(255,62,0,0.1);font-weight:300;padding:0 1em}ul.svelte-1dbd5up{margin:0;padding:0}ul.svelte-1dbd5up::after{content:'';display:block;clear:both}li.svelte-1dbd5up{display:block;float:left}[aria-current].svelte-1dbd5up{position:relative;display:inline-block}[aria-current].svelte-1dbd5up::after{position:absolute;content:'';width:calc(100% - 1em);height:2px;background-color:rgb(255,62,0);display:block;bottom:-1px}a.svelte-1dbd5up{text-decoration:none;padding:1em 0.5em;display:block}
h1.svelte-8od9u6,p.svelte-8od9u6{margin:0 auto}h1.svelte-8od9u6{font-size:2.8em;font-weight:700;margin:0 0 0.5em 0}p.svelte-8od9u6{margin:1em auto}@media(min-width: 480px){h1.svelte-8od9u6{font-size:4em}}</style>
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
<noscript id='sapper-head-start'></noscript><title>404</title><noscript id='sapper-head-end'></noscript>
</head>
<body>
<!-- The application will be rendered inside this element,
because `src/client.js` references it -->
<div id='sapper'>
<nav class="svelte-1dbd5up"><ul class="svelte-1dbd5up"><li class="svelte-1dbd5up"><a href="." class="svelte-1dbd5up">index</a></li></ul></nav>
<main class="svelte-1uhnsl8">
<h1 class="svelte-8od9u6">404</h1>
<p class="svelte-8od9u6">Not found</p>
</main></div>
<!-- Sapper creates a <script> tag containing `src/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
<script>__SAPPER__={error:{message:"Not found"},status:404,baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');</script><script src="/client/ffd658007fc78219636d/main.js"></script>
</body>
</html>《守则》
我的server.js：
import express from 'express'
import http from 'http'
import sirv from 'sirv'
import compression from 'compression'
import * as sapper from '@sapper/server';
import socketIO from 'socket.io-client'
const app = express()
const server = http.createServer(app)
const io = socketIO(server)
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
io.on('connection', (socket) => {
console.log('connected')
})
app
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
server.listen(PORT, err => {
if (err) console.log('error', err);
});我的_layout.svelte脚本：
<script>
import io from 'socket.io-client'
import Nav from '../components/Nav.svelte';
const socket = io()
export let segment;
</script>我正在使用Sapper的default webpack configuration
回答 1
Stack Overflow用户
发布于 2020-11-24 08:00:52
server.js
import sirv from 'sirv';
import compression from 'compression';
import * as sapper from '@sapper/server';
import socketIo from 'socket.io';
import express from 'express';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const app = express();
const server = app
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
const io = socketIo(server);
io.on('connection', function(socket) {
console.log('connected')
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63185436
复制相关文章
相似问题
腾讯云开发者
