小编心语：大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐！！这一次要分享的东西小编也不是很懂啊，总之小编把它拿出来是觉地比较稀奇，而且程序也没有那么难，是一个比较简单的程序，大家可以多多试试~

简介：Socket.IO实现了实时双向的基于事件的通讯机制。旨在让各种浏览器与移动设备上实现实时app功能，模糊化各种传输机制。
下面我们使用Node.js和Socket.IO来做一个简单的聊天室。
一、初始化项目

（这个是在实验楼网站的虚拟平台需要实现的~可自动略过这一环节，不需要也可以的哈）

打开虚拟机终端，新建一个文件夹socketio，进入此文件夹使用npm初始化项目：

  1. $ npm init

然后输入项目相关信息，也可以不输入，直接一路回车，完成后会在此目录下生产一个package.json文件。这个文件用于描述项目相关信息，以及声明项目中所使用的模块。
然后安装Socket.IO：

  1. $ npm install socket.io --save

安装Socket.IO的时候，--save参数用于保存模块依赖信息到package.json文件，安装完后，打开package.json文件会看到里面多了一项内容：

  1. "dependencies": {
  2.     "socket.io": "^1.2.1"
  3. }

同时Socket.IO安装在了node_modules文件夹下。
二、创建http server

安装Socket.IO模块，我们现在先来创建一个可访问的页面吧。
在文件夹socketio中新建index.js文件，这就是在服务端运行的主文件。
首先在index.js中添加如下代码，引入所需的模块：

  1. var http = require('http');           // http 模块，用于创建http server
  2. var socketio = require('socket.io');  // socket.io 模块
  3. var fs = require('fs');               // fs 模块，用于读取文件

然后通过http模块创建app，在index.js文件中添加代码：

  1. // http.createServer()方法用于创建http server
  2. // 以处理来自浏览器的请求
  3. var app = http.createServer(function(req, res) {
  4.     // fs.readFile()方法用于读取文件
  5.     // 此处读取的是index.html文件
  6.     // 也就是我们后面要编写的HTML页面文件
  7.     fs.readFile(__dirname + '/index.html', function (err, data) {
  8.         if (err) {
  9.             res.writeHead(500);
  10.             return res.end('Error loading index.html');
  11.         }
  12.         res.writeHead(200); // 返回请求状态码
  13.         res.write(data);    // 返回读取到的内容给浏览器
  14.         res.end();
  15.     });
  16. }).listen(8080); // listen()方法用监听http server到指定的地址和端口，默认地址是localhost
  1.  

在文件夹socketio中新建index.html文件，代码如下：

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Socket.IO chat</title>
  6.     </head>
  7.     <body>
  8.         Hello, shiyanlou.
  9.     </body>
  10. </html>

运行程序：

  1. $ node index.js

然后打开虚拟机中的浏览器，访问“127.0.0.1:8080”浏览器页面中出现“Hello, shiyanlou.”，说明创建的http server成功了。
三、实现聊天

下面我们就来创建Socket.IO对象吧：

  1. // 在与app相同的地址和端口上创建Socket.IO服务
  2. var io = socketio(app);
  3.  
  4. // 监听connection事件
  5. // 当浏览器连接到此Socket.IO服务时触发该事件
  6. io.on('connection', function (socket) {
  7.     // 监听浏览器端的chat事件
  8.     socket.on('chat', function (data) {
  9.         console.log(data);
  10.     });
  11. });

这里在服务器端监听了来自浏览器的chat事件，后面我们会在index.html中实现此事件。
先来实现一个简单聊天界面吧，修改index.html文件中的代码如下所示：

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Socket.IO chat</title>
  6.         <style>
  7.             * { margin: 0; padding: 0; box-sizing: border-box; }
  8.             body { font: 13px Helvetica, Arial; }
  9.             #form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  10.             #form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  11.             #form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  12.             #messages { list-style-type: none; margin: 0; padding: 0; }
  13.             #messages li { padding: 5px 10px; }
  14.             #messages li:nth-child(odd) { background: #eee; }
  15.         </style>
  16.         <!-- 引入socket.io库和jQuery库 -->
  17.         <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
  18.         <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  19.     </head>
  20.     <body>
  21.         <!-- 显示消息记录 -->
  22.         <ul id="messages"></ul>
  23.  
  24.         <!-- 消息发送框 -->
  25.         <div id="form">
  26.             <input id="m" autocomplete="off" /><button id="send">Send</button>
  27.         </div>
  28.     </body>
  29. </html>

然后在浏览器端创建chat事件，在index.html文件中添加如下JavaScript代码：

  1. <script>
  2. // 连接到Socket.IO服务器
  3. var socket = io.connect();
  4.  
  5. $(function() {
  6.     // 绑定发按钮发送消息的事件
  7.     $('#send').on('click', function() {
  8.         var data = $('#m').val();
  9.  
  10.         // 创建chat事件并发送消息给服务器
  11.         // emit('event') 表示发送了一个event命令
  12.         // 使用io.on('event')接收对应事件的信息
  13.         // 所以客户端服务器端需要使用socket.on('chat')接收聊天信息
  14.         socket.emit('chat', { msg: data });
  15.         $('#m').val('');
  16.     });
  17. });
  18. </script>

现在运行项目：

  1. $ node index.js

使用虚拟机中的浏览器访问“127.0.0.1:8080”，通过聊天框发送消息，会看到服务器端会打印出相应消息内容。
下面我们来实现把用户发送的消息发送给所有客户端，在index.js文件中创建sendmsg事件：

  1. io.on('connection', function (socket) {
  2.     socket.on('chat', function (data) {
  3.         console.log(data);
  4.  
  5.         // 创建sendmsg事件并把发送聊天消息给客户端
  6.         io.emit('sendmsg', data);
  7.     });
  8. });

客户端接收并显示消息，在index.html中添加JavaScript代码：

  1. $(function() {
  2.     // ...
  3.  
  4.     // 接收消息并显示到消息记录框中
  5.     socket.on('sendmsg', function(msg) {
  6.         $('#messages').append($('<li>').text(msg.msg));
  7.     });
  8. });

再重新运行项目：

  1. $ node index.js

现在用浏览器打开多个页面，就能看到别人发送的消息了，这样一个简单的实时聊天室就实现了。
当然，你可以自己扩展这个项目，做一个功能更加完整的聊天室。
此项目主要用到了Socket.IO的emit()方法和on()方法，emit()方法用于创建和触发事件，on()方法用于监听事件。

更多详细步骤及内容请登录http://www.shiyanlou.com/courses/?course_type=project&tag=all​
有更多基础课、项目课欢迎大家登陆实验楼官方网站http://www.shiyanlou.com。
现在登陆实验楼更有感恩好礼相送http://www.shiyanlou.com/huodong/thanks.html

Socket.IO聊天室~简单实用的更多相关文章

  1. 利用socket.io+nodejs打造简单聊天室

    代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...

  2. Android 基于Socket的聊天室（一）

    Socket是TCP/IP协议上的一种通信,在通信的两端各建立一个Socket,从而在通信的两端之间形成网络虚拟链路.一旦建立了虚拟的网络链路,两端的程序就可以通过虚拟链路进行通信. Client A ...

  3. Python Socket 编程——聊天室示例程序

    上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和客户端的代码了解基本的 Python Socket 编程模型.本文再通过一个例子来加强一下对 Socket 编程的 ...

  4. java基于socket公共聊天室的实现

    项目:一个公共聊天室功能的实现,实现了登录聊天,保存聊天记录等功能. 一.实现代码 1.客户端 ChatClient.java import java.io.BufferedReader; impor ...

  5. Android进阶(十五)socket通信——聊天室

    想做一个聊天室,花费了将近一天的时间,各种错误.讲解知识点之前,絮叨几句:动手能力还是很重要的,有时看似简单的一个问题,当你真正着手去解决的时候就有可能会遇到各种各样的问题,原因之一就是因为你的知识储 ...

  6. Python Socket 编程——聊天室演示样例程序

    上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和client的代码了解主要的 Python Socket 编程模型.本文再通过一个样例来加强一下对 Socket ...

  7. nodejs之socket.io 聊天实现

    写在前面:最近很火的“996”话题,可谓是引起一片热议,马老师说:能够996应该是幸运的,996是对奋斗者的一种机遇(记得不是很清楚).996缺少的是自己的空闲时间了,当我是空闲的时候偶尔996挺好的 ...

  8. nodejs 聊天室简单实现

    前言 博客园的样式真心不会用啊,看着大大们的博客各种好看,心里无奈啊,只能慢慢摸索了. 最近的项目nodejs+wcf+app,app直接从wcf服务获取数据,nodejs作为单独的服务器为app提供 ...

  9. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

随机推荐

  1. JS验证控件jQuery Validate

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  2. EasyUI Tabs绑定右键

    JS:             /*为选项卡绑定右键*/                 $("#tabs").tabs({                     onConte ...

  3. geotrellis使用（十七）使用缓冲区分析的方式解决单瓦片计算边缘值问题

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 需求分析 实现方案 总结 一.前言        最 ...

  4. 三行代码接入，社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。

    (转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...

  5. Entity FrameWork 365日系列文章源码研究 （1）

    By KMSFan --  此系列的文章只作为自己的读书笔记,不纳入博客园首页. 总结的知识点: 1.DBContext 类 2.Attribute里的属性(NotNull) 3.DbContext实 ...

  6. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  7. SQL游标(cursor)详细说明及内部循环使用示例

    游标 游标(cursor)是系统为用户开设的一个数据缓冲区,存放SQL语句的执行结果.每个游标区都有一个名字,用户可以用SQL语句逐一从游标中获取记录,并赋给主变量,交由主语言进一步处理. 游标是处理 ...

  8. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  9. case break结构与return的有关要点

    //确认事件 private void cmd_ok_Click(object sender, EventArgs e) { //客户名称是否为空 if (txt_banhao.Text.TrimEn ...

  10. MVC5 DBContext.Database.SqlQuery获取对象集合到ViewModel集合中（可以利用这个方法给作为前台视图页cshtml页面的@model 源）

    首先我们已经有了一个Model类: using System;using System.Data.Entity;using System.ComponentModel.DataAnnotations; ...