socket.io在线聊天室

最新推荐文章于 2024-04-14 09:30:44 发布

天码营

最新推荐文章于 2024-04-14 09:30:44 发布

阅读量258

点赞数 1

分类专栏：天码营教程文章标签： websocket java web 聊天 spring mvc web前端开发

本文链接：https://blog.csdn.net/sinat_30389651/article/details/51231812

版权

天码营教程专栏收录该内容

82 篇文章 1 订阅

订阅专栏

socket.io在线聊天室由David发表在天码营

socket.io是一个JavaScript库，用来建立实时的Web App。socket.io可以通过npm安装到Node.js的应用中，同时浏览器和服务器拥有同样的API接口。

你还在思考socket.io是如何做到实时推送的么？它会利用HTML5的新特性websocket协议与服务器建立TCP连接，对于不支持websocket的浏览器使用Polling作为Fallback。

效果图

废话少说，我们来做一个简单的聊天室吧！先看图：

打开浏览器后，我们输入一个昵称来继续：

此后便可以开始聊天啦：

准备工作

你需要安装Node.js，需要一个文本编辑器。

Node.js是一个JavaScript的运行时。就是通过它我们可以在服务器端运行JavaScript代码~

Node.js在这里下载安装即可： http://nodejs.org
文本编辑器可以是UltraEdit、Editplus、Visual Studio、XCode、Ellipse、Webstorm等等。你喜欢就好，如果你还没有选好，我推荐Webstorm或者Vim！

项目框架

首先，你需要创建一个项目。项目就是包含你需要的文件的一个目录！所以就是先创建一个目录，比如叫chatroom。

然后，安装我们需要的工具。进入chatroom/目录，然后安装socket.io和express：

npm install -S socket.io express

这时，你应该已经拥有node_modules目录了，它里面安装了上述两个工具。然后创建这样一些文件和目录：

├── index.js
├── node_modules
└── public
    ├── index.html
    └── main.js

public目录下的两个文件是给浏览器用的，而index.js是我们的服务器。如果你还不知道这些文件里写些什么，那么留空就好。

静态页面

socket.io的服务器代码只包含一个文件index.js。首先来写一个静态文件的服务器，这样用户从浏览器访问时可以拿到一个HTML（index.html）。

// file: index.js
var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public'));

var server = require('http').createServer(app);
server.listen(3000, function () {
  console.log('Server listening at port %d', 3000);
});

上述代码中，首先引入了express.js（这是一个简单的Web服务器），然后让它来serve public下的静态文件。然后用http模块创建一个服务器，并监听3000端口。为了看到效果，现在来编写一个index.html：

<html>
<head><meta charset="UTF-8"></head>
<body>
  <ul class="pages">
    <li class="chat page">
      <div class="chatArea">
        <ul class="messages"></ul>
      </div>
      <input class="inputMessage" placeholder="Type here..."/>
    </li>
    <li class="login page">
      <div class="form">
        <h3 class="title">What's your nickname?</h3>
        <input class="usernameInput" type="text" maxlength="14" />
      </div>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/main.js"></script>
</body>
</html>

可以看到这个HTML中写了两个页面.login.page和.chat.page，我们会在main.js中合适地显示其中一个，并隐藏另外一个。同时引入了jquery、socket.io和main.js（你的main.js现在应该是空的）。

然后运行node index.js，在浏览器中打开localhost:3000，你应该能看到这样的页面：

看到这里你也许想说页面太丑了吧！说好的聊天室呢？页面丑当然是因为没有样式啦，自行编写！或者直接从本文右上角的“参考代码”中拷贝~

socket.io服务器

上面的server是用app来初始化的，同时我们希望这个server可以响应推送信息，只需要用它创建一个socket.io对象：

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

然后，当有浏览器连接到socket.io时，监听浏览器的两个请求：

加入聊天，此时应该给一个用户名作为参数。我们把这个用户名绑定到当前连接的socket上。
发送消息，此时应该给一个消息内容。我们从当前socket上拿出用户名，与消息内容一同广播给所有人。

io.on('connection', function (socket) {
  // 请求名称叫 add user
  socket.on('add user', function (username) {
    socket.username = username;
  });

  // 请求名称叫 new message
  socket.on('new message', function (data) {
    // 发送给客户端的广播也叫 new message
    socket.broadcast.emit('new message', {
      username: socket.username,
      message: data
    });
  });
});

这么简单！真的可以用吗？相信我！

你要相信Node.js和socket.io都是追求极致简单的。

socket.io客户端

上面的服务器监听了两个请求，我们现在需要在客户端中发送这两个请求~ 当然是编写main.js，还记得吗？main.js已经被引入到了index.html中！

// file: main.js
$(function(){
    var socket = io();

    // 接收`new message`广播
    socket.on('new message', function (data) {
        addChatMessage(data);
    });

    // 发送消息的函数
    function sendMessage (str) {
        socket.emit('new message', str);
    }
  }
});