欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

node+socket.io 实现一个聊天室

发布时间:2025/3/8 编程问答 37 豆豆
生活随笔 收集整理的这篇文章主要介绍了 node+socket.io 实现一个聊天室 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

我们只做简单的实现,不接入数据库,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 实现一个聊天室的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。