零基础搭建网页聊天室(socket.io使用教程)

本文实际为翻译Socket.io官方教程——《Get Started: Chat application》

开始吧,我们做个聊天应用!

在这个教程里,我们将制作一个简单的网页聊天应用。它机会不要求你有任何关于Node.jsSocket.io的基础,所以这份教程适合任何水平的开发者。先看看Demo。

介绍

曾经写一个网页聊天应用可能会用到网页工具套件LAMP、PHP,那时候非常困难。因为客户端要不断地像服务器发送请求,查看是否有信息变化,体验起来非常慢。

Socket通信是传统解决实时通讯的一种方案,它提供了服务器和客户端之间的双向通信。

这就意味着,服务器可以把消息推送给客户端,无论何时你发送了一个消息,客户端都能接受到你的消息,并将它推送给其他连接的用户。

网站框架

我们的第一个目标是建立起一个简单的HTML页面(提供一个提交输入信息的Form表单,和一个对话的列表)。我还还将通过Node.js的web框架express。首先,我们需要保证电脑已经安装了Node.js(如何安装Node)。

第一步,我们先创建一个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 [email protected]

现在,我们已经装好了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
    你将会看到


如果你在浏览器中输入

http://localhost:3000

提供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),刷新页面就可以看到:

    使用Socket.io

    Socket.io由两部分组成:

    • 一个Node.js HTTP服务器的应用socket.io(此处原文为:A server that integrates with (or mounts on) the Node.JS HTTP Server: socket.io)

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

      这样会自动保存dependencypackage.json。现在,我们开始编辑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('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”。多打开几个页面,你将会看到:

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

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

    这样你刷新网页的多次,你就会看到:

    触发事件

    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如下:

    这时我们就完成了我们的聊天应用,仅仅只有20行代码!!!

    后话

    当然,学好前端,你还需要关注一个公众号!——每日前端
    各位兄弟姐妹,共勉!

    你可能感兴趣的:(socket.io,node.js,javascript)