基于Node.js + socket.io实现WebSocket的聊天DEMO

最新推荐文章于 2022-02-25 16:59:18 发布

hacke2

最新推荐文章于 2022-02-25 16:59:18 发布

阅读量7.7k

点赞数 1

分类专栏： WEB开发

本文链接：https://blog.csdn.net/hacke2/article/details/39211727

版权

WEB开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

原文摘自我的前端博客，欢迎大家来访问

http://hacke2.github.io

简介

最近看Node.js和HTML5，练手了一个简易版的聊天DEMO，娱乐一下

为什么需要socket.io？

node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。

简答来说socket.io具体以下特点：

1.socket.io设计的目标是支持任何的浏览器，任何Mobile设备。目前支持主流的PC浏览器 (IE,Safari,Chrome,Firefox,Opera等)，Mobile浏览器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基于node.js并简化了WebSocket API，统一了通信的API。它支持：WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。

2.socket.io解决了实时的通信问题，并统一了服务端与客户端的编程方式。启动了socket以后，就像建立了一条客户端与服务端的管道，两边可以互通有无。

代码

创建app.js 源码如下

var fs = require('fs')	//文件操作
    , http = require('http')	//http服务器
    , socketio = require('socket.io');	//socket.io，用来和前台进行交互
  
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    //将index.html输出
    res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(3000, function() {
    console.log('Listening at: http://localhost:3000');
});

//连接成功的回调  
socketio.listen(server).on('connection', function (socket) {
    socket.on('message', function (msg) {
        console.log('接受到 ', msg);
        //将信息发送给其他客户端
        socket.broadcast.emit('message', msg);
    });
});

创建index.html

<html>
<head>
	<meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        $(function(){
            var iosocket = io.connect();
  
            iosocket.on('connect', function () {
                $('#incomingChatMessages').append($('<li>已连接！</li>'));
  
                iosocket.on('message', function(message) {
                    $('#incomingChatMessages').append($('<li></li>').text(message));
                });
                iosocket.on('disconnect', function() {
                    $('#incomingChatMessages').append('<li>失去连接</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>
控制台:&nbsp;<ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>