美文网首页
WebSocket入门案例两枚

WebSocket入门案例两枚

作者: ____雨歇微凉 | 来源:发表于2016-10-15 10:31 被阅读1013次

    第一种 使用ws模块

    服务端,新建nodejs.js

    //启动WebSocket服务器。
    var server = require('http').createServer() , 
    WebSocketServer =     require('ws').Server , 
    wss = new WebSocketServer({ server: server }) , 
    app = require('express')() , 
    port = 1740;
    
    //使用express中间件use,详细可以去看express
    app.use(function (req, res) { 
        //send用来向客户端发送信息,on用来接收/监听客户端发来的信息
        res.send({ msg: "hello" });});
        //监听事件  //%s是字符串、%d是整数、%f代表浮点数。
        wss.on('connection', function connection(ws) { 
        //监听 
        ws.on('message', function incoming(message) {  
        console.log('received: %s', message);
     });
         //发送 
      ws.send('something');});
      server.on('request', app);
      server.listen(port, function () { 
        console.log('Listening on ' + server.address().port) 
      });
    

    客户端,新建entry.js

    <script> //查看客户端是否支持WebSocket
      if(window.WebSocket != undefined) {  
            //创建一个WebSocket,监听端口1740端口,这里必须是:ws,不能是http
            var connection = new WebSocket('ws://localhost:1740'); 
             console.log(connection.readyState); 
             //握手协议成功以后,readyState就从0变为1,并触发open事件  
            connection.onopen = function wsOpen (event) {   
                console.log('Connected to: ' + event.currentTarget.URL);
            //连接建立后,客户端通过send方法向服务器端发送数据。   
            connection.send('向客户端发送消息'); 
       };  
        //监听  
        connection.onmessage = function wsMessage (event) {   
            console.log(event);  
        };  
        //关闭WebSocket连接,会触发close事件。  
        connection.onclose = function wsClose () {   
            console.log("Closed");  
         };  
        //出现错误  
        connection.onerror = wsError;  
        function wsError(event) {   
            console.log("Error: " + event.data);  
        }
    }
    //readyState : 0:正在连接、 1:连接成功、2:正在关闭、3:连接关闭。
    </script>
    

    接下来:
    <code>$ node nodejs.js //启动服务</code>
    打开浏览器,输入<code>http://localhost:1740</code> ,在输入台中就可以看到服务端发来的信息了,同时服务端也可以看到客户端发来的信息

    第二种 使用socket.io

    服务端,新建nodejs.js

    var app = require('express')();
    var server = require('http').createServer(app);
    var io =  require('socket.io').listen(server);
    server.listen(80);
    
    app.get('/', function (req, res) { 
        res.sendfile(__dirname + '/webSocket.html');
    });
    io.sockets.on('connection', function (socket) { 
        //发送事件。 
        socket.emit('news', { hello: 'world' });
         //接收事件。 
        socket.on('anotherNews', function (data) { 
         socket.emit('news', { hello: 'world' });  
        console.log(data); 
        });
    });
    

    客户端,新建entry.js

    <script src="/socket.io/socket.io.js"></script>
    <script> 
    if(window.WebSocket != undefined) {  
        var socket = io.connect('http://localhost:80');
        socket.on('news', function (data){   
            console.log(data);  
        });
        var emitsomething = function(attr){   
            socket.emit('anotherNews', { hello: attr });
        } 
    }
    </script>
    

    如果想了解更详细的内容,参见:
    <code>http://javascript.ruanyifeng.com/htmlapi/websocket.html</code>

    相关文章

      网友评论

          本文标题:WebSocket入门案例两枚

          本文链接:https://www.haomeiwen.com/subject/nkinyttx.html