我们只做简单的实现,不接入数据库,nodejs也不使用express和koa等框架

因此依赖只有两个: 1、socket.io 2、mime(用于获取静态资源时获取文件的mime类型)

安装命令: npm install socket.io mime --save

其他的就不赘述了 先描述一下文件目录结构

静态 js 和 css 文件放在 public 下面的相应目录下

socket连接是基于tcp的因此需要给socket传入一个http服务的实例,这样就能启动socket服务

var http = require('http');
var socketio = require('socket.io');
var server = http.createServer();
io = socketio(server);server.listen(3001);
复制代码

当然,socket.io不止提供了一种启动方式,这里就不一一列举了

socketio(server) 返回的是一个 socket 实例,通过这个实例可以监听客户端的 connection事件,事件监听的第二个参数是一个回调函数,会掉函数也会返回一个socket对象,这个 socket 对象可以监听这个链接的另一端触发的事件(这里就是客户端)

这里需要搞清楚的一点是,每个socket连接都会在 connection 事件的回调中返回一个socket 对象,这个对象可监听对应客户端触发的事件,也可以向其他的socket对象广播消息

通过connection 事件返回的 socket 对象触发和监听事件:

io.on('connection', function(socket) {// 监听客户端发送的message事件socket.on('message', function() {// 向同一个房间中的其他用户广播消息socket.broadcast.to(message.room).emit('message', {text: nickNames[socket.id] + ': ' + message.text});});// 触发事件socket.emit('message', {nick: 'Lily',content: 'hello world!'});
});
复制代码

现在我们知道了如何在服务端创建socket 服务,那么客户端应该应该怎么和服务端的socket服务创建连接呢?

html页面引入的其他 js 文件这里就不说了,这里需要说明的是socket.io.js:

<script src="/socket.io/socket.io.js"></script>
复制代码

我刚开始的时候也是很疑惑,因为这个文件在我的服务其中根本不存在。事实是,这个文件是socket 服务器启动后自动生成的。因此我们只需要在html文件中按照这个路径引入就行了。

引入socket.io.js 后就会有一个全局的 io 对象,用于触发事件和监听服务器 socket 服务器触发的事件 客户端事件监听:

var socket = io.connect();$(document).ready(function() {// 监听服务器发送的事件socket.on('message', function(message) {var newElement = $('<div class="msg-box"></div>').append($('<span></span>').text(message.text));$('#messages').append(newElement);});});
复制代码

客户端触发事件:

socket.emit('message', {nick: 'Lily',content: 'yes! I hear you now'
});
复制代码

message可以是对象也可以是字符串

这样建立连接设置监听后就可以和服务端通过事件进行通信了

服务端监听到客户端发来的消息后向该房间所有用户广播消息:

socket.broadcast.to(currentRoom[socket.id]).emit('message', {text: previousName + ' 现在已更名为 ' + name + '.'
});
复制代码

结合以上描述的这些方法,就能完整搭建一个聊天室了,关于前端页面的结构和页面事件的逻辑我这里就不详细说了

我把我的demo放到了github上,有兴趣的同学可以看看:github.com/SailorCai/n…

node+socket.io 实现一个聊天室相关推荐

  1. node+socket.io+HTTP简易聊天室

    用node+socket.io+HTTP做一个聊天室.聊天室主要由两部分构成,服务器(index.js)以及客户端(index.html). 文件目录如下所示: (node_modules文件夹以及p ...

  2. Express+Socket.IO 实现简易聊天室

    代码地址如下: http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: ...

  3. 基于socket.io的web聊天室

    基于socket.io的web聊天室 一. 项目介绍 该项目使用node.js作为后端服务器框架,并利用socket.io来实现web聊天室功能.socket.io是由 JavaScript 实现的基 ...

  4. Node.js笔记-使用socket.io构建websocket聊天室

    先安装socket.io npm install socket.io 服务端代码: let app = require('http').createServer(); let io = require ...

  5. php做群聊功能,使用socket.io 实现群聊天室

    本篇向大家分享一个socket.io的使用实例,实现群聊天的功能.如果想使用socket.io那么必须借助于nodejs来实现服务端,因此我们需要在nodejs中安装socket.io 安装socke ...

  6. python聊天室设计_如何使用 Python 开发一个聊天室?

    ​接下来我们就使用 Python 来操作 socket ,实现一个聊天室的一些主要功能.首先我们来回想下,一般的聊天室都是怎样的,有多个用户可以同时在线,他们可以实时获取到消息,实时发送消息. 服务端 ...

  7. 使用python基于socket的tcp服务器聊天室

    # coding=utf-8 import socket,threading,time '''代码说明:1.创建一个字典用于接受客户端的用户名和信息2.创建一个类对象client用于编写客户端套接字对 ...

  8. 使用socket.io做一个简单的WEB聊天室

    使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...

  9. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

最新文章

  1. java自学入门心得体会 0.1
  2. 7个值得推荐的优质软件,让人忍不住体验!
  3. sublimelinter校验php,代码校验工具 SublimeLinter 的安装与使用
  4. mysql服务的基本操作_MySql(一)mysql服务的基本操作及环境配置
  5. java中各进制之间的转换(十进制转十六进制、十进制转二进制、二进制转十进制、二进制转十六进制)...
  6. 合肥高校计算机协会联盟部门
  7. STM32开发 -- IAP详解
  8. 【bzoj2245】[SDOI2011]工作安排 费用流
  9. python 并发访问数据库_【数据库】如何实现python3实现并发访问水平切分表
  10. 未来流媒体工作流的核心技术
  11. Jmeter java.lang.OutOfMemoryError: GC overhead limit exceeded
  12. github的应用详解
  13. 博途v14 加入C语言的方法,如何利用博途V14新建S7-1200项目?
  14. App项目实战之路(一):概述篇
  15. 拨开历史的迷雾从篡夺者战争到五王之战的政经原因
  16. jQuery事件自动触发
  17. C2C、O2O、B2B、B2C 是什么?区别在哪里?
  18. 短线交易的自我训练:盘感从何而来?
  19. 0204隐函数及由参数方程所确定的函数的导数相关变化率-导数与微分
  20. 软考是什么?考哪个科目容易过?

热门文章

  1. C语言 全局变量和局部变量区别 - C语言零基础入门教程
  2. BugkuCTF-PWN题pwn6-printf超详细讲解(未提供Libc版本)
  3. php ios 判断字符串长度,iOStextfield 限制输入字符长度和过滤表情符号
  4. matlab axis 用法,MATLAB中regionprops的用法
  5. 侍魂服务器维修,侍魂胧月传说合服活动开启 4月15日更新内容预告
  6. tl494c封装区别_TL494参数,功能介绍,TL494应用电路图,封装,管脚及TL494 PDF中文资料手册...
  7. 处理入参_看看优秀的程序员是如何处理NPE的
  8. linux redis-4.0,Linux Redis 4.0.2 安装部署
  9. linux date输出到文件,Linux常用命令--ls、cd、date用法
  10. mysql更新id最大_我们可以在单个MySQL查询中更新具有最高ID的行吗?