美文网首页
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