首页推荐 PHP MYSQL js&html golang node liunx & centos MongoDB 其他

socket.io使用教程 搭建WebSocket （使用Node.js windows）

2017-07-14 19:14:52

Node.js

 首先安装node.js 地址  https://nodejs.org/en/    中文地址 http://nodejs.cn/  

 Windows 安装直接运行，然后下一步。。。。


express -- 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

相关地址 http://www.expressjs.com.cn/


  第一步，我们先创建一个package.json文件，它用来描述这个项目。我推荐你把它放在一个新建的空文件夹内。（我把我新建的文件夹名叫做chat-example.）

{  
  "name": "socket-chat-example",  
  "version": "0.0.1", 
  "description": "my first socket.io app",
  "dependencies": {}
}

 

现在，为了简单的package.json中的dependencies（依赖），我们将使用npm install --save命令。

npm install --save express@4.10.2    @4.10.2 -- 版本号

现在，我们已经装好了express，接下来，我们创建一个新的文件index.js来当做我们的服务器端文件。

var app = require('express')();var http = require('http').Server(app);

app.get('/', function(req, res){
  res.send('
Hello world
');
});

http.listen(3000, function(){  console.log('listening on *:3000');
});

这三段代码可以解释为：

  • Express初始化了app，让它充当一个HTTP服务器。

  • 我们定义了一个路由处理器／，当我们输入网址的时候，它进入到文件根目录。

  • 我们让HTTP服务器监听3000端口
    这时，如果你输入
    node index.js
    你将会看到

      11.png

  

  如果你在浏览器中输入   http://localhost:3000/     显示  

Hello world

 

提供HTML

到目前为止，我们index.js中用了res.send来传递了一段HTML字符串，如果我们将整段HTML代码用这样的方式传递，会显得很奇怪，所以我们将创建index.html并传递它

我们用sendFile重新写一下路由处理器

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

并创建index.html 

  Socket.IO chat

 


 

     

       

       

     



    如果你重启了这个进程（按Ctrl/Cmd + C再输入node index.js），刷新页面就可以看到：

    12.png

     

    Socket.IO

    Socket.io由两部分组成：

    • 一个Node.js HTTP服务器的应用socket.io

    • 一个客户端的js库socket.io-client
      我们只需安装一个模块就可以来使用：
      npm install --save socket.io

      这样会自动保存dependency到package.json 

     

    var app = require('express')();
    var http = require('http').Server(app);
    var io = require('socket.io')(http);

    app.get('/', function(req, res){
      res.sendFile(__dirname + '/index.html');
    });

    io.on('connection', function(socket){
      console.log('a user connected');
    });

    http.listen(3000, function(){
      console.log('listening on *:3000');
    });

     

    • 注意到，我通过传递了http对象（HTTP服务器）新建了一个socket.io实例，接着，我对传递进来的套接字（socket），监听connection事件，并将事件答应到console。

    现在在index.html中，我在添加了如下语句：

    这会让网页加载socket.io-client，它会暴露一个io全局对象，并连接socket。

    注意：当我调用io()时，我没有特别声明任何url。因为它默认连接这个页面的host服务器。

    如果你重现启动服务器，你将会看到console输出“a user connected”。多打开几个页面，你将会看到：

    13.png


    每个socket同样会触发disconnect事件：

    io.on('connection', function(socket){  console.log('a user connected');
  socket.on('disconnect', function(){    console.log('user disconnected');
  });
});

    这样你刷新网页的多次，你就会看到：

    14.png


    触发事件

    Socket.IO背后最主要的作用时可以让服务器和客户端发送和接受事件触发，任何能被编辑成JSON或二进制的对象都可以传递。

    我们先来实现这种情况：用户输入信息，服务器端接收到chat message事件，这是index.html中的script应该这样写：

    在index.js，我们输出chat message事件：

    io.on('connection', function(socket){
  socket.on('chat message', function(msg){    console.log('message: ' + msg);
  });
});

    广播

    下一个目标就是由服务器触发每一个客户端的事件

    为了给每个客户端发送时间，Socket.io提供了io.emit：

    io.emit('some event', { for: 'everyone' });

    如果你想给每个人发送消息，出了某个特定的socket连接，我们可以用boardcast标示符：

    io.on('connection', function(socket){
  socket.broadcast.emit('hi');
});

    在我们这个项目中，为了简便，我们给每个连接的用户都发送消息

    io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

    在客户端这一侧，当我们捕获到了chat message事件，我们将它体现在页面中，所有的JavaScript如下：



    最后代码


    服务端  index.js

       

    var app = require('express')();

    var http = require('http').Server(app);

    var io = require('socket.io')(http);


    app.get('/', function(req, res){

      res.sendFile(__dirname + '/index.html');

    });


    io.on('connection', function(socket){

      //console.log('a user connected');

      socket.on('chat message', function(msg){

        //console.log('user disconnected');

    //console.log('message: ' + msg);

    io.emit('chat message', msg);

      });

    });


    http.listen(3000, function(){

      console.log('listening on *:3000');

    });



    客户端  index.html 


     

        Socket.IO chat