我正在Angular应用程序中创建一个实时聊天，我有这两个类，我使用Socket.io
Server.js
const http = require('http');
const app = require('./backend/app');
const port = process.env.PORT || 3000;
app.set('port', port);
const server = http.createServer(app);
const io = require('socket.io')(server, {
cors: {
origins: ['http://localhost:4200']
}
});
const sockets = [];
io.on('connection', (socket) => {
sockets.push(socket);
console.log(`New connection ${socket.id}`);
//io.emit('user.add', socket.id);
socket.on('chat', function(msg){
for(var i = 0; i < sockets.length; i++){
sockets[i].send(msg)
console.log(msg);
}
io.sockets.emit('chat', msg);
});
socket.on('disconnect', () => {
io.emit('user.remove', socket.id);
for(var i = 0; i < sockets.length; i++){
if(sockets[i].id === socket.id){
sockets.splice(i, 1); //deleta um elemento do array (posicao, numero de elementos a ser excluido)
}
}
console.log(`o id: ${socket.id} saiu ` + 'agora restam ' + sockets.length + ' online')
})
})
server.listen(port);
HTML
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: rgb(12, 255, 12); }
</style>
<title>Painel de Controle</title>
</head>
<body>
<style>
body {
background-image: url(assets/img/backgroundloginfade.jpg);
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;
height: 1500px;
}
</style>
<button
class="btn-navgation"
type="button"
value="Voltar"
onClick="history.go(-1)"
>
<img src="assets/img/back_icon.png" width="75px" alt="" />
</button>
<div class="chat_window">
<div class="top_menu">
<div class="buttons">
<div class="button close"></div>
<div class="button minimize"></div>
<div class="button maximize"></div>
</div>
<div class="title">Chat</div>
</div>
<ul id ="messages" class="messages">
<div id="output" *ngFor="let data of output">
<p>{{data.message}}</p>
</div>
</ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input placeholder="Digite sua mensagem!" class="message_input" type="text" id="message" autocomplete="off" [(ngModel)]="message" (keypress)="messageTyping()"/>
</div>
<button class="send_message" type="button" id="send" (click)="sendMessage()">Enviar</button>
</div>
<div id="message"></div>
</div>
</body>
我需要在我的HTML中添加一个脚本(下面的代码(，但它无法直接将标记脚本src添加到HTML中。。。那么，我如何将下面的脚本添加到我的html(所有3个脚本(？？？
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
Angular默认索引页通常位于src/app/index.html。您可能希望在head中添加前两个脚本标记，最后一个刚好在结束body标记之前。
像这样：
<html>
<head>
// ...All your other stuff here
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<app-root></app-root>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
</body>
</html>
这对于测试来说可能已经足够好了，但请记住，由于几个原因，这不是一个好的做法。测试后，您应该添加socket.io作为项目依赖项(https://www.npmjs.com/package/socket.io或https://www.npmjs.com/package/ngx-socket-io)并控制组件控制器中的DOM。