ノードを使用してWebチャットアプリケーションをビルドします.JSソケット.io
注目📝
始めましょう！
この書き込みは非常にシンプルな2層のチャットアプリケーションを構築するプロセスを歩くことを期待.
バックエンドを構築することから始めましょう
SOCKET-APPLICATION-SERVER . npm init . このコマンドは、名前、バージョン、説明などのアプリケーションのすべての主要な詳細をpackage.json ファイル.
app.js . socket.io 走らせるnpm install socket.io 端末で.app.js 以下のコードを持つファイル.const httpServer = require('http').createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', `${front end server link}`);
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
});
socket.io パッケージを作成し、オブジェクトを作成します. const io = require('socket.io')(httpServer, {
cors: {
origin: `${front end server link}`,
methods: ["GET", "POST"],
credentials: true
}
});
io.on('connection', socket => {
});
io.on('connection', socket => {
//new code added
socket.on('username', username => {
users[socket.id] = username
socket.broadcast.emit('user-in', username)
})
//new code added
});
send-chat-message それから、それを出すchat-message タグ.このメッセージは、入ってきたメッセージと出てくるメッセージを区別するのに役立つ.io.on('connection', socket => {
socket.on('username', username => {
users[socket.id] = username
socket.broadcast.emit('user-in', username)
})
//new code added
socket.on('send-chat-message', msg => {
socket.broadcast.emit('chat-message', {message: msg,
name: users[socket.id]})
})
//new code added
});
const users = {}
io.on('connection', socket => {
socket.on('username', username => {
users[socket.id] = username
socket.broadcast.emit('user-in', username)
})
socket.on('send-chat-message', msg => {
socket.broadcast.emit('chat-message', {message: msg,
name: users[socket.id]})
})
//new code added
socket.on('disconnect', () => {
socket.broadcast.emit('user-disconnected', users[socket.id])
delete users[socket.id]
})
//new code added
});
const PORT = process.env.PORT || 3000;
httpServer.listen(PORT, () => console.log(`Running server on 🚀. \nListening on ${ PORT } 👂`));
node app.js 端末で.あなたはいつでも変更を行うサーバーを自動的にリフレッシュNodemonを使用することを検討することができます.フロントエンドの構築を開始
適切な理解を支援するために、フロントエンドは別のサーバーで実行されます.
SOCKET-APPLICATION-CLIENT . npm init このフォルダの端末でsocket.io 走らせるnpm install socket.io 端末で.index.html 次の本文をファイルします.<body>
<div id="message-container">
</div>
<div id="send-container">
<input name="" placeholder="Type your message..." type="text" id="message-input">
<button id="end-button" type="submit">
<span id="submits">
<i class="fas fa-location-arrow"></i>
</span>
</button>
</div>
</body>
<head> タグ.The socket.io インスタンスはバックエンドから作成され、送られます.The script.js ファイルはメッセージを送受信するためにインスタンスを使用します.<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
<script defer src="./script.js"></script>
nodemon 走らせるnpm install nodemon 端末で.これは、変更を行うときにいつでもフロントエンドサーバーを再起動します.app.js . app.js 最初にnpm install express . 私たちのようなサーバの静的ファイルを表現する必要がありますindex.html ページ.app.js 以下のコードによるページ.var express = require('express'), app = express()
app.use('/', express.static('public'));
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`Running server on 🚀. \nListening on ${ PORT } 👂`));
index.html もっと早く.ファイルでは、必要なすべてのDOM要素を取得します.
const mesaageForm = document.getElementById("submits")
const messageInput = document.getElementById('message-input')
const messageContainer = document.getElementById('message-container')
const userInfo = document.getElementById('user-info')
// connect to the server socket
const socket = io('http://localhost:3000', {
withCredentials: true
});
//listen to the socket for content with the tag 'chat-message'
socket.on('chat-message', data => {
if (data.message != "") {
appendMessage(`${data.name}: ${data.message}`)
}
})
//listen to the socket for user disconnection
socket.on('user-disconnected', name => {
appendMessage(`${name}: disconnected`)
})
//ask the user for their name
const username = prompt('What is your name ?😃')
socket.emit('username', username)
// send message to reciever
function appendMessage(message){
let man = messageContainer.scrollHeight + 500;
messageContainer.scroll = man
var wrapper= document.createElement('div');
wrapper.innerHTML = `
<div>
<p>${message}</p>
</div>
`
messageContainer.append(wrapper)
}
//show message on sender's screen
function appendMessageForMe(message){
messageContainer.scrollTop = messageContainer.scrollHeight;
var wrapper= document.createElement('div');
wrapper.innerHTML = `
<div>
<p>${message}</p>
</div>
`
messageContainer.append(wrapper)
}
// if the user taps the send button or presses enter key, the message should be sent.
mesaageForm.addEventListener('click', e =>{
e.preventDefault()
const message = `${messageInput.value}`
if (message != "") {
// the emit method sends the message out with the tag: 'send-chat-message'
socket.emit('send-chat-message', message)
appendMessageForMe(message)
messageInput.value = ''
}
})
messageInput.addEventListener('keydown', e =>{
if (e.key === "Enter") {
e.preventDefault()
const message = `${messageInput.value}`
if (message != "") {
socket.emit('send-chat-message', message)
appendMessageForMe(message)
messageInput.value = ''
}
}
})
nodemon 端末ではhttp://localhost:8000/結論
Reference
この問題について(ノードを使用してWebチャットアプリケーションをビルドします.JSソケット.io), 我々は、より多くの情報をここで見つけました https://dev.to/joojodontoh/build-a-web-chat-application-using-node-js-socket-io-d9iテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol