zoukankan      html  css  js  c++  java
  • Node.js 和Socket.IO 实现chat WEBIM

    socket官方:   http://socket.io/ 

    需求:实现WEB IM功能,数据从服务器PUSH  不是PULL

     websocket是基于HTML5的新特性,不兼容IE6,7,8 。。。兼容性不好

    使用 Node.js 和 Socket.IO 构建简单的聊天程序

    在node.js根目录下创建文件夹chat,里面添加两个文件:app.js和index.html

    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);
        });
    });
    复制代码

    index.html

    复制代码
    <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:&nbsp;<ul id="incomingChatMessages"></ul>
    <br />
    <input type="text" id="outgoingChatMessage">
    </body>
    </html>
    复制代码

    开启服务器

    node chat/app.js

    打开两个chrome输入localhost:8080

    这样就看到效果了,然后你可以慢慢研究代码了,再然后就洗洗睡吧。

     使用的源码来自http://www.open-open.com/lib/view/open1337216216557.html

  • 相关阅读:
    三维重建:SLAM算法的考题总结
    ubuntu16.04安装KDE
    pip更新
    DNN结构演进History—CNN-GoogLeNet :Going Deeper with Convolutions
    OpenCV直方图均衡化
    图像连通域检测的2路算法Code
    OpenCV中的模板匹配/Filter2d
    OpenCV边缘检测的详细参数调节
    ICCV2015上的GazeTracker论文总结
    图像的连通域检测的堆栈算法
  • 原文地址:https://www.cnblogs.com/niaowo/p/3758755.html
Copyright © 2011-2022 走看看