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

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

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

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

$ npm init

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

$ npm install socket.io --save

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

"dependencies": {

    "socket.io": "^1.2.1"

}

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

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

var http = require('http');           // http 模块，用于创建http server

var socketio = require('socket.io');  // socket.io 模块

var fs = require('fs');               // fs 模块，用于读取文件

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

// http.createServer()方法用于创建http server

// 以处理来自浏览器的请求

var app = http.createServer(function(req, res) {

    // fs.readFile()方法用于读取文件

    // 此处读取的是index.html文件

    // 也就是我们后面要编写的HTML页面文件

    fs.readFile(__dirname + '/index.html', function (err, data) {

        if (err) {

            res.writeHead(500);

            return res.end('Error loading index.html');

        }

        res.writeHead(200); // 返回请求状态码

        res.write(data);    // 返回读取到的内容给浏览器

        res.end();

    });

}).listen(8080); // listen()方法用监听http server到指定的地址和端口，默认地址是localhost
 

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

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Socket.IO chat</title>

    </head>

    <body>

        Hello, shiyanlou.

    </body>

</html>

运行程序：

$ node index.js

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

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

// 在与app相同的地址和端口上创建Socket.IO服务

var io = socketio(app);

// 监听connection事件

// 当浏览器连接到此Socket.IO服务时触发该事件

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

    // 监听浏览器端的chat事件

    socket.on('chat', function (data) {

        console.log(data);

    });

});

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

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Socket.IO chat</title>

        <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>

        <!-- 引入socket.io库和jQuery库 -->

        <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>

        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

    </head>

    <body>

        <!-- 显示消息记录 -->

        <ul id="messages"></ul>

        <!-- 消息发送框 -->

        <div id="form">

            <input id="m" autocomplete="off" /><button id="send">Send</button>

        </div>

    </body>

</html>

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

<script>

// 连接到Socket.IO服务器

var socket = io.connect();

$(function() {

    // 绑定发按钮发送消息的事件

    $('#send').on('click', function() {

        var data = $('#m').val();

        // 创建chat事件并发送消息给服务器

        // emit('event') 表示发送了一个event命令

        // 使用io.on('event')接收对应事件的信息

        // 所以客户端服务器端需要使用socket.on('chat')接收聊天信息

        socket.emit('chat', { msg: data });

        $('#m').val('');

    });

});

</script>

现在运行项目：

$ node index.js

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

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

    socket.on('chat', function (data) {

        console.log(data);

        // 创建sendmsg事件并把发送聊天消息给客户端

        io.emit('sendmsg', data);

    });

});

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

$(function() {

    // ...

    // 接收消息并显示到消息记录框中

    socket.on('sendmsg', function(msg) {

        $('#messages').append($('<li>').text(msg.msg));

    });

});

再重新运行项目：

$ 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. scikit-learn 支持向量机算法库使用小结

    之前通过一个系列对支持向量机(以下简称SVM)算法的原理做了一个总结,本文从实践的角度对scikit-learn SVM算法库的使用做一个小结.scikit-learn SVM算法库封装了libsvm ...

  2. Rust初步（六）：在C#中使用Rust组件

    上一篇文章,我们通过实例比较了一下C#和Rust的性能表现,应该说在Release模式下面,Rust进行计算密集型的运算还是有些比较明显的优势的.那么,我们有没有可能,在C#中做一些快速应用开发,而一 ...

  3. ASP.NET MVC Ajax.ActionLink 简单用法

    ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...

  4. 【JUC】JDK1.8源码分析之ThreadPoolExecutor（一）

    一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...

  5. 【LeetCode】Verify Preorder Serialization of a Binary Tree（331）

    1. Description One way to serialize a binary tree is to use pre-order traversal. When we encounter a ...

  6. JavaScript 中的相等检测

    一.有时JavaScript的等价比较是一件抓狂的事情,看看这个表格就一目了然了.

  7. 【原创】kafka consumer源代码分析

    顾名思义,就是kafka的consumer api包. 一.ConsumerConfig.scala Kafka consumer的配置类,除了一些默认值常量及验证参数的方法之外,就是consumer ...

  8. android Can't bind to local 86XX for debugger

    For some reason eclipse DDMS always gives the error 'Can't bind to local 86XX for debugger' every ti ...

  9. NIOS II 中直接调用Modelsim仿真

    STEP1:创建一个工程,实现并编译该工程,编写TestBench文件. STEP2:设置启动Modelsim的路径 选择Nios II菜单Tools->Options..,在弹出的界面中,选择 ...

  10. cors解决webapi post时报错405 method not allowed

    nuget控制台敲入以下命令:Install-Package Microsoft.AspNet.WebApi.Cors –IncludePrerelease 打开WebApiConfig.cs添加如下 ...