socket.io实现在线群聊功能
发布时间 - 2026-01-11 00:33:28 点击率:次我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序。最最开始

先安装socket.io:
npm install socket.io
利用Node的搭建Http服务
分为两个文件,服务端文件app.js和客户端index.html
app.js
var app = require('http').createServer(handler)
io = require('socket.io').listen(app)
fs = require('fs')
app.listen(80)
function handler (req, res) {
fs.readFile(__dirname + '/index.html',function (err, data) {
if (err) {res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);}); });
这里需要注意的是: require(‘socket.io').listen(app) 实际上这句就是讲socket的监听加入的app设置的http模块了 io.sockets.on('connection',function()…)这里设置了在连接后进行的处理,代码示例中,主要包含两件事,一个是向前段发送news的事件,一个是监听my other event事件。
index.html
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
客户端一个引用了socket.io.js的javscript库还有就是连接服务器(通过io.connect(‘http://localhost')) 之后在监听收到news的事件后,发送my other event事件
利用Express3框架上面的例子只是使用nodejs建立了一个交互,也可以使用express2的web框架, 具体app.js代码如下:
var app = require('express')()
server = require('http').createServer(app)
io = require('socket.io').listen(server);
server.listen(80);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');});
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});});
接收发送事件 socket.io允许用户自定义发送接收的事件。除了connect,message,disconnect三个事件外,用户可以自定义自己的事件
// note, io.listen(<port>) will create a http server for youvar io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
io.sockets.emit('this', { will: 'be received by everyone'});
socket.on('private message', function (from, msg) {
console.log('I received a private message by ', from, ' saying ', msg);
});
socket.on('disconnect', function () {
io.sockets.emit('user disconnected');
});});
存储数据有的时候需要存储一些和客户端关联的数据在会话里,socket.io也是支持的,代码如下:
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.on('set nickname', function (name) {
socket.set('nickname', name, function () {
socket.emit('ready');
});
});
socket.on('msg', function () {
socket.get('nickname', function (err, name) {
console.log('Chat message by ', name);
});
});});
socket.set和socket.get方法分为用于设置和获取变量。
设置命名空间有的时候要一个程序支持多个应用,如果使用默认的 “/” 命名空间可能会比较混乱。如果想让一个连接可以支持多个连接,可以使用如下的命名空间的方法:
app.js
var io = require('socket.io').listen(80);var chat = io
.of('/chat')
.on('connection', function (socket) {
socket.emit('a message', {
that: 'only'
, '/chat': 'will get'
});
chat.emit('a message', {
everyone: 'in'
, '/chat': 'will get'
});
});
复制代码 代码如下:var news = io .of(‘/news') .on('connection', function (socket) { socket.emit('item', { news: ‘item' }); });
client.js
<script>
var chat = io.connect('http://localhost/chat')
, news = io.connect('http://localhost/news');
chat.on('connect', function () {
chat.emit('hi!');
});
news.on('news', function () {
news.emit('woot');
});</script>
发送获取数据有的时候,你需要在发送数据后,等待服务器的消息确认。当然简单的发,可以通过两次消息发送,来完成。这里介绍一种使用回调函数的方法:
app.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.on('ferret', function (name, fn) {
fn('woot');
});});
client.html
<script>
var socket = io.connect(); // TIP: .connect with no args does auto-discovery
socket.on('connect', function () { // TIP: you can avoid listening on `connect` and listen on events directly too!
socket.emit('ferret', 'tobi', function (data) {
console.log(data); // data will be 'woot'
});
});</script>
广播向所有的连接触发事件,这里注意:不包括本身连接的事件。
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.broadcast.emit('user connected');});
我写的聊天程序:
index.html
<script src="/socket.io/socket.io.js"></script><script>
var socket = io.connect('http://localhost');
socket.on("notice", function(data){
var msg = document.getElementById('all').value;
document.getElementById('all').innerText = msg + "\n" + data.message;
});
var chat_fn = function(){
var msg = document.getElementById("message").value;
socket.emit("chat", {message: msg});
};
socket.on("nickname ready", function(data){
alert("nickname changed.");
});
var change_nickname = function(){
var nickname = document.getElementById("nickname").value;
socket.emit('set nickname', nickname);
};</script><textarea id="all" cols=40 rows=20></textarea><br /><label>Message:</label><input id="message" type="text" name="message" cols=120/><input id="chat_btn" type="button" value="chat" onclick="javascript:chat_fn()" /><label>NickName:</label><input id="nickname" typee="text" name="nickname" /><input id="chang_name" type="button" value="nickname" onclick="javascript:change_nickname()" />
app.js
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs');
app.listen(80);function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});}
io.sockets.on('connection', function (socket) {
// socket.emit('news', { hello: 'world' });
// socket.on('my other event', function (data) {
// console.log(data);
// });
socket.set('nickname', 'nickname', function(){
});
socket.on('set nickname', function(name){
socket.set('nickname', name, function(){
console.log("change nickname=>" + name);
socket.emit('nickname ready');
});
});
socket.on('chat', function(data){
socket.get('nickname', function(err, name){
socket.emit("notice", {message: name + ":" + data.message});
socket.broadcast.emit("notice", {message: name + ":" + data.message});
console.log("chat: " + data.message);
});
});});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
# socket.io
# 在线群聊
# vue + socket.io实现一个简易聊天室示例代码
# 基于Nodejs利用socket.io实现多人聊天室
# Node.js websocket使用socket.io库实现实时聊天室
# 基于socket.io+express实现多房间聊天
# 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
# 多个
# 客户端
# 自定义
# 可以使用
# 自己的
# 的是
# 两次
# 可以通过
# 写了
# 官方网
# 站上
# 想让
# 用户可以
# 不包括
# 件事
# 我写
# 这句
# 来完成
# 需要注意
# 回调
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
b2c电商网站制作流程,b2c水平综合的电商平台?
JavaScript如何实现错误处理_try...catch如何捕获异常?
Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案
如何破解联通资金短缺导致的基站建设难题?
html5的keygen标签为什么废弃_替代方案说明【解答】
如何撰写建站申请书?关键要点有哪些?
如何在建站宝盒中设置产品搜索功能?
美食网站链接制作教程视频,哪个教做美食的网站比较专业点?
Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能
标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的,背景音乐、音效等?
C++时间戳转换成日期时间的步骤和示例代码
Laravel如何使用Socialite实现第三方登录?(微信/GitHub示例)
高端建站如何打造兼具美学与转化的品牌官网?
详解Oracle修改字段类型方法总结
Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出
Laravel如何创建和注册中间件_Laravel中间件编写与应用流程
微信小程序 HTTPS报错整理常见问题及解决方案
如何为不同团队 ID 动态生成多个独立按钮
怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗?
js实现点击每个li节点,都弹出其文本值及修改
制作公司内部网站有哪些,内网如何建网站?
Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】
LinuxShell函数封装方法_脚本复用设计思路【教程】
微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】
昵图网官方站入口 昵图网素材图库官网入口
详解免费开源的.NET多类型文件解压缩组件SharpZipLib(.NET组件介绍之七)
黑客如何利用漏洞与弱口令入侵网站服务器?
javascript中的try catch异常捕获机制用法分析
Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门
php485函数参数是什么意思_php485各参数详细说明【介绍】
Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践
如何挑选优质建站一级代理提升网站排名?
Laravel怎么导出Excel文件_Laravel Excel插件使用教程
Swift中switch语句区间和元组模式匹配
北京企业网站设计制作公司,北京铁路集团官方网站?
Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道
使用Dockerfile构建java web环境
网站广告牌制作方法,街上的广告牌,横幅,用PS还是其他软件做的?
Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧
Laravel如何配置和使用缓存?(Redis代码示例)
Laravel如何实现用户密码重置功能?(完整流程代码)
Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】
文字头像制作网站推荐软件,醒图能自动配文字吗?
Laravel如何实现API版本控制_Laravel API版本化路由设计策略
Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置
zabbix利用python脚本发送报警邮件的方法
用v-html解决Vue.js渲染中html标签不被解析的问题
Laravel如何实现本地化和多语言支持?(i18n教程)

