zoukankan      html  css  js  c++  java
  • 基于node的webSocket应用

    html推出了webSocket。因为毕业设计要用到聊天室的功能,所以就研究了下webSocket的应用。

    在客户端使用websocket需要创建WebSocket对象,通过提供的open、send、message、close等方法实现创建、发送、监听信息、关闭连接。例如下面的代码:

    if('WebSocket' in window){
    	// 创建websocket实例
    	var socket = new WebSocket('ws://localhost:8080');
    	//打开
    	socket.onopen = function(event) {
    	  // 发送
    	  socket.send('I am the client and I\'m listening!');
    	  // 监听
    	  socket.onmessage = function(event) {
    		console.log('Client received a message',event);
    	  };
    	  // 关闭监听
    	  socket.onclose = function(event) {
    		console.log('Client notified socket has closed',event);
    	  };
    	  // 关闭
    	  //socket.close()
    	};
    }else{
    	alert('本浏览器不支持WebSocket哦~');
    }
    Socket.Io是个JavaScript框架,包括服务器端和客户端,使用统一的API封装了各种实时连接(如WebSocket、Flash Socket、AJAX长轮询等),使得后端的连接可以对开发人员透明。
    Socket.IO使用检测功能来判断是否建立WebSocket连接,或者是AJAX long-polling连接,或Flash等。可快速创建实时的应用程序。
    Socket.IO可以从GitHub下载,可以把socket.io.js文件包含到页面中:
    CODE:
    <script src="http://cdn.socket.io/stable/socket.io.js"></script>
    [/code
    
    此时,Socket.IO在此页面上是有效的,是时候创建Socket了:
    
    [code]
    // 创建Socket.IO实例,建立连接
    var socket= new io.Socket('localhost',{ 
      port: 8080 
    }); 
    socket.connect(); 
    
    // 添加一个连接监听器
    socket.on('connect',function() { 
      console.log('Client has connected to the server!'); 
    });
    
    // 添加一个连接监听器
    socket.on('message',function(data) { 
      console.log('Received a message from the server!',data); 
    });
    
    // 添加一个关闭连接的监听器
    socket.on('disconnect',function() { 
      console.log('The client has disconnected!'); 
    }); 
    
    // 通过Socket发送一条消息到服务器
    function sendMessageToServer(message) { 
      socket.send(message); 
    }
    Socket.IO简化了WebSocket API,统一了返回运输的API。传输包括:
    WebSocket
    Flash Socket
    AJAX long-polling
    AJAX multipart streaming
    IFrame
    JSONP polling
    你还可以设置任意的Socket.IO构造器的第二个选项,选项包括:
    port - 待连接的端口
    transports - 一个数组,包含不同的传输类型
    transportOptions - 传输的参数使用的对象,带附加属性
    Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。

    客户端使用socket.io

    去github clone socket.io的最新版本,或者直接饮用使用socket.io的CDN服务:

    <script src="http://cdn.socket.io/stable/socket.io.js"></script>

    下面可以创建使用socket.io库来创建客户端js代码了:

    var socket = io.connect('http://localhost');
    socket.on('news', function (data) {
    	console.log(data);
    	socket.emit('my other event', { my: 'data' });
    });

    socket.on是监听,收到服务器端发来的news的内容,则运行function,其中data就是请求回来的数据,socket.emit是发送消息给服务器端的方法。

    socket.io不仅可以搭建客户端的websocket服务,而且支持nodejs服务器端的websocket。

    使用node插件管理包,运行下面的命令就可以安装成功socket.io

    npm install socket.io

    关于如何配置npm见前一篇文章

    通过nodejs的http模块就可以方便的搭建websocket服务器环境,例如下面的代码:

    server端:
    var  http = require('http')
        , socketio = require('socket.io');
     
    var server = http.createServer(function(req, res) {
        res.writeHead(200, { 'Content-type': 'text/html'});
        console.log('Listening at: http://localhost:8080');
    });
    //添加一个连接监听器
    socketio.listen(server).on('connection', function (client) {
        //监听成功
        client.on('message', function (msg) {
            console.log('Message Received: ', msg);
               client.send('message', msg);
        });
        client.on("disconnect", function() {
            console.log("Server has disconnected");
        })
    });

    client端:

    <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>
    
        
    </head>
    <body>
    Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>
    <br />
    <input type="text" id="outgoingChatMessage">
    </body>
    <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>
    </html>
    把服务端代码保存为socket.js然后在命令行执行:node socket.js 即可启动服务器,用浏览器打开两个页面就可以测试了。
    注:代码要和npm_module在同一个目录下。不然会出现找不到socket.io module的错误。
    
    
  • 相关阅读:
    CSUFT 1002 Robot Navigation
    CSUFT 1003 All Your Base
    Uva 1599 最佳路径
    Uva 10129 单词
    欧拉回路
    Uva 10305 给任务排序
    uva 816 Abbott的复仇
    Uva 1103 古代象形文字
    Uva 10118 免费糖果
    Uva 725 除法
  • 原文地址:https://www.cnblogs.com/zzcflying/p/2524299.html
Copyright © 2011-2022 走看看