Node.js 18　WebSocketを使ってチャットを作成するサンプル

2024年8月11日

環境
Ubuntu 24.04
Node.js 18

概要
WebSocket を利用した簡易チャットを作成します。

1.webscoketをインストールします
$ npm install fs socket.io express

2.chat.jsを作成する

$ vi chat.js

var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);

app.get('/', function(req, res){

res.sendFile(__dirname + '/index.html');

});

io.on('connection', function(socket){

socket.on('chat message', function(msg){

io.emit('chat message', msg);

});

http.listen(1337, function(){

console.log('listening on *:1337');

});

$ vi chat.js var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); }); http.listen(1337, function(){ console.log('listening on *:1337'); });

$ vi chat.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(1337, function(){
  console.log('listening on *:1337');
});

3.htmlを作成します

$ vi index.html

<!DOCTYPE html>

<html>

<head>

<title>WebSocket Chat sample</title>

</head>

<body>

</form>

var socket = io();

$('form').submit(function(){

socket.emit('chat message', $('#sendmsg').val());

$('#sendmsg').val('');

return false;

});

socket.on('chat message', function(msg){

$('#messages').append($('<li style="margin-bottom: 6px;">').text(msg));

});

</script>

</body>

</html>

$ vi index.html <!DOCTYPE html> <html> <head> <title>WebSocket Chat sample</title> </head> <body> <form action=""> <input id="sendmsg" autocomplete="off" /><button>Send</button> </form> <ul id="messages" style="list-style-type: decimal; font-size: 16px; font-family: Arial;"></ul> <script src="/socket.io/socket.io.js"></script> <script src="http://code.jquery.com/jquery.min.js"></script> <script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#sendmsg').val()); $('#sendmsg').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li style="margin-bottom: 6px;">').text(msg)); }); </script> </body> </html>

$ vi index.html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat sample</title>
</head>
<body>
<form action="">
<input id="sendmsg" autocomplete="off" /><button>Send</button>
</form>
<ul id="messages" style="list-style-type: decimal; font-size: 16px; font-family: Arial;"></ul>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#sendmsg').val());
    $('#sendmsg').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li style="margin-bottom: 6px;">').text(msg));
  });
</script>
</body>
</html>

jsを起動します
$ node chat.js

クライアントコンピューターで Web ブラウザーを起動し、アプリケーションにアクセスして動作確認します。
http://IPアドレス:1337/

Posted by arkgame

関連投稿: