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');
});

3.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