Building real time app with Socket.io and Node.js

最新推荐文章于 2025-11-03 10:54:05 发布

原创最新推荐文章于 2025-11-03 10:54:05 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

other 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 Socket.io 和 Node.js 实现简单的实时通信应用。通过服务器端代码示例展示了如何处理连接事件、监听登录事件及发送消息。同时提供客户端 JavaScript 代码用于建立连接、接收消息及发送消息。

Socket.io is a framework which implement WebSocket in HTML5. 我们可以通过其和Node.js实现实时通信。

var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){
	console.log('a user connected');
	
	//监听新用户加入
	socket.on('login', function(obj){
		//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
		socket.name = obj;
		
		//检查在线列表，如果不在里面就加入
		
		//向所有客户端广播用户加入
		//sleep(3000);
		socket.emit('logout', 'bbbb');
		console.log('加入了聊天室');
	});
});

socket.send("aa") == socket.emit("message", "aa")

Broadcasting: socket.broadcast.emit('message', msg);

客户端代码示例：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
    <script>
        $(function(){
            //var iosocket = io.connect();
            var iosocket = io.connect('ws://127.0.0.1:3000');
            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>