文章      动态     相关文章     最新文章     手机版动态     相关动态     |   首页|会员中心|保存桌面|手机浏览

9s24lr

http://fabua.ksxb.net/com9s24lr/

相关列表
文章列表
  • 暂无文章
推荐文章
联系方式
  • 联系人:赵先生
  • 电话:17722432737
Socket.IO聊天室~简单实用
发布时间:2025-01-03        浏览次数:15        返回列表

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

Socket.IO聊天室~简单实用

Socket.IO聊天室

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

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

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



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



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



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

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

 


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

 

 

 





在文件夹socketio中新建index.html文件,代码如下:



运行程序:

 


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

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



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



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



现在运行项目:

 


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


再重新运行项目:

 


现在用浏览器打开多个页面,就能看到别人发送的消息了,这样一个简单的实时聊天室就实现了。
当然,你可以自己扩展这个项目,做一个功能更加完整的聊天室。
此项目主要用到了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