socket.io实现websocket聊天室

现在很流行的websocket的实现socket.io同样包括客户端和服务器端两部分。它不仅简化了接口,使得操作更容易,而且对于那些不支持WebSocket的浏览器,会自动降为Ajax连接,最大限度地保证了兼容性。它的目标是统一通信机制,使得所有浏览器和移动设备都可以进行实时通信。
首先我们需要保证设备已经安装了node.js,我们后续的开发工作都在node环境中执行,如果没安装请点击这里Node.JS;
然后我们就可以开始编写程序了:

  1. 新建package.json,里面包含了我们开发中所用到的依赖
{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}
  1. 结合express框架进行编写,我们用npm install --save,以便可以方便加到我们的dependencies中;
 npm install --save express
  1. 现在我们可以编写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服务器的函数处理程序(如第2行所示)。
  • 我们定义一个路由处理程序/,当我们访问我们的网站时,它会被调用
  • 我们使http服务器侦听端口3000。
    If you run node index.js you should see the following:

A console saying that the server has started listening on port 3000

And if you point your browser to http://localhost:3000:

A browser displaying a big 'Hello World'

提供HTML

到目前为止,index.js我们正在调用res.send并传递一个HTML字符串。如果我们将整个应用程序的HTML放在那里,我们的代码看起来会很混乱。相反,我们将创建一个index.html文件并提供服务。

让我们重构我们的路由处理程序来sendFile代替:

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

并填充index.html以下内容:


<html>
  <head>
    <title>Socket.IO chattitle>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    style>
  head>
  <body>
    <ul id="messages">ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Sendbutton>
    form>
  body>
html>

如果您重新启动该过程(通过按Ctrl + C并node index再次运行)并刷新页面,它应如下所示:

显示输入和“发送”按钮的浏览器

集成Socket.IO

Socket.IO由两部分组成:

  • 与Node.JS HTTP Server集成(或安装)的服务器:socket.io
  • 在浏览器端加载的客户端库:socket.io-client

在开发过程中,socket.io我们会自动为客户服务,所以现在我们只需要安装一个模块:

npm install --save socket.io

这将安装模块并添加依赖项package.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(__ dirname + '/ index.html'; 
};

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


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

请注意,我socket.io通过传递http(HTTP服务器)对象来初始化新实例。然后我在connection事件中侦听传入的套接字,然后将其记录到控制台。

现在在index.html中,我在以下内容之前添加以下代码段

< script  src = “/socket.io/socket.io.js” > 
< script >
  var socket = io();

这一切都需要加载socket.io-client,它公开了一个io全球性的,然后连接。

请注意,我在调用时没有指定任何URL io(),因为它默认尝试连接到为页面提供服务的主机。

如果您现在重新加载服务器和网站,您应该看到控制台打印“用户已连接”。

尝试打开几个标签,您会看到几条消息:

一个控制台,显示多条消息,表明某些用户已连接

每个插座也会触发一个特殊disconnect事件:

io.on('connection'function(socket) { console .log('用户连接';   socket.on('disconnect'function(
  
) { console .log('user disconnected';   }; };
    

然后,如果您多次刷新选项卡,则可以看到它的运行情况:

一个控制台,显示多条消息,表明某些用户已连接和断开连接

发出事件

Socket.IO背后的主要思想是,您可以使用您想要的任何数据发送和接收您想要的任何事件。任何可以编码为JSON的对象都可以,并且也支持二进制数据。

让我们这样做,以便当用户键入消息时,服务器将其作为chat message事件获取。将含有scriptindex.html更改,现在应该如下所示:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

在index.js中,我们打印出聊天信息

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' });

如果你想向除了某个套接字以外的所有人发送消息,我们有以下broadcast标志:

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代码总数达到:

<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('
  • ').text(msg)); }); }); </script>
  • 这完成了我们的聊天应用程序,大约20行代码!这就是它的样子:
    在这里插入图片描述

    你可能感兴趣的:(socket.io)