Socket.IO 和 Node.js 聊天程序

最新推荐文章于 2023-03-19 15:39:29 发布

beckjin

最新推荐文章于 2023-03-19 15:39:29 发布

阅读量1.4k

点赞数

分类专栏： Javascript/jQuery NodeJS

本文链接：https://blog.csdn.net/jinbiao520/article/details/13170379

版权

Javascript/jQuery 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

NodeJS

5 篇文章 0 订阅

订阅专栏

1、安装 node.js

2、安装 socket.io

npm install socket.io

3、创建文件app.js

var fs = require('fs'), 
      http = require('http'),
      socketio = require('socket.io');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(8080, function() {
    console.log('Listening at: http://localhost:8080');
});

socketio.listen(server).on('connection', function (socket) {
    socket.on('message', function (msg) {
        console.log('Message Received: ', msg);
        socket.broadcast.emit('message', msg);
    });
});

3、创建文件index.html 下载socket.io并引入socket.io.js

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        $(function(){
            var iosocket = io.connect();
            iosocket.on('connect', function () {
                $('#incomingChatMessages').append($('<li>Connected</li>'));
                iosocket.on('message', function(message) {
                    $('#incomingChatMessages').append($('<li></li>').text(message));
                });
                iosocket.on('disconnect', function() {
                    $('#incomingChatMessages').append('<li>Disconnected</li>');
                });
            });
            $('#outgoingChatMessage').keypress(function(event) {
                if(event.which == 13) {
                    event.preventDefault();
                    iosocket.send($('#outgoingChatMessage').val());
                    $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
                    $('#outgoingChatMessage').val('');
                }
            });
        });
    </script>
</head>
<body>
Incoming Chat: <ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>

4、然后运行 app.js 文件：

node app.js

5、打开两个浏览器，访问 http://localhost:8080/ 地址开始互聊了