博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Socket.IO聊天室
阅读量:7222 次
发布时间:2019-06-29

本文共 3122 字,大约阅读时间需要 10 分钟。

hot3.png

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

简介: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 servervar 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文件,代码如下:

            
        
Socket.IO chat                Hello, shiyanlou.    

运行程序:

$ 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文件中的代码如下所示:

            
        
Socket.IO chat        
        
        
        
                
        
        
        
            
Send            

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

现在运行项目:

$ 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($('
  • ').text(msg.msg));    });});
  • 再重新运行项目:

    $ node index.js

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

    更多详细步骤及内容请登录

    有更多基础课、项目课欢迎大家登陆实验楼官方网站。
    现在登陆实验楼更有感恩好礼相送

    转载于:https://my.oschina.net/shiyanlou/blog/360898

    你可能感兴趣的文章
    Essential Studio for mobile MVC中创建Razor应用程序平台教程
    查看>>
    java主函数的含义
    查看>>
    中国大学MOOC —— 学习笔记(四)
    查看>>
    访问,ringbtn,
    查看>>
    致橡树
    查看>>
    一段测试代码,哦哦哦,
    查看>>
    uiimagepickercontroller,中文,--》摘
    查看>>
    第四次作业
    查看>>
    在python中调用js或者nodejs
    查看>>
    【年终总结】2年计划还是要有的,万一实现了呢?(转自叶小钗)
    查看>>
    数字图像处理学习笔记(1.1)---位图的读写、几何变换、傅里叶变换、直方图均衡...
    查看>>
    javascript数组顺序-----1冒泡的另一种比较好理解的写法
    查看>>
    数据结构-栈的实现之行编译器核心实现
    查看>>
    C++ Project 积累(2)
    查看>>
    (1)用VisualSvn Server,Tortoise Svn,AnkhSvn搭建Svn版本控制
    查看>>
    Mysql索引
    查看>>
    格式化输出
    查看>>
    hdu 3804 Query on a tree (树链剖分+线段树)
    查看>>
    定位、指南针、地理编码
    查看>>
    Kafka 简介
    查看>>