正文

socket.io入门篇

暗夜余晖  暗夜余晖  2022-10-01  560

关键词：

本文原文地址：https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html

前言

本篇介绍使用node.js模块组件socket.io实现一个非常非常简易的聊天案例。
本系列文章不对 socket.io 历史背景做过多阐述，只会通过一个个的案例带领大家进入socket.io的殿堂，增进小伙伴在socket.io实际开发中的基本使用。
socket.io 官网地址:https://www.socket.io
本篇案例使用到的node.js模块组件：
express # 做为 socket 通信的依赖服务基础
socket.io # socket 通信基础模块

源码下载地址：http://pan.baidu.com/s/1mhPJHyg

项目文件结构

技术分享

服务端

var http=require("http");
var express=require("express");//引入express
var socketIo=require("socket.io");//引入socket.io
var app=new express();
var server=http.createServer(app);
var io=new socketIo(server);//将socket.io注入express模块
//客户端 1 的访问地址
app.get("/client1",function (req,res,next) {
    res.sendFile(__dirname+"/views/client1.html");
});
//客户端 2 的访问地址
app.get("/client2",function (req,res,next) {
    res.sendFile(__dirname+"/views/client2.html");
});
server.listen(8080);//express 监听 8080 端口，因为本机80端口已被暂用
//每个客户端socket连接时都会触发 connection 事件
io.on("connection",function (clientSocket) {
    // socket.io 使用 emit(eventname,data) 发送消息，使用on(eventname,callback)监听消息
    //监听客户端发送的 sendMsg 事件
    clientSocket.on("sendMsg",function (data) {
        // data 为客户端发送的消息，可以是 字符串，json对象或buffer
        // 使用 emit 发送消息，broadcast 表示 除自己以外的所有已连接的socket客户端。
        clientSocket.broadcast.emit("receiveMsg",data);
    })
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端1</title>
</head>
<body>
<label>聊天内容:</label><br/>
<textarea id="content" style="height: 200px; width:300px;"></textarea>
<br/>
<input  id="sendMsg" type="text"/>
<button id="btn_send">发送</button>

<!-- 首先引入 socket.io 客户端脚本-->
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
 var socket = io.connect();//连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
    // 监听 receiveMsg 事件，用来接收其他客户端推送的消息
 socket.on("receiveMsg",function (data) {
        content.value+=data.client+":"+data.msg+"
";
 });
 var content=document.getElementById("content");
 var sendMsg=document.getElementById("sendMsg");
 var btn_send=document.getElementById("btn_send");
 btn_send.addEventListener("click",function () {
        var data={client:"客户端1",msg:sendMsg.value};
 //给服务端发送 sendMsg事件名的消息
 socket.emit("sendMsg",data);
 content.value+=data.client+":"+data.msg+"
";
 sendMsg.value="";
 });

</script>

</body>
</html>

界面效果如下：

技术分享

socket.io入门篇

...mitcode.com/detail/5926e3a056fba70278bf2044.html前言上篇我们介绍了socket.io中room的概念和使用，本篇我们继续深入了解socket.io中namespace（命名空间）的概念和使用。对于namespace的概念只需理解3个地方：1.在不声明新的命名空间情况下，系... 查看详情

socket.io入门原理

1.Socket.IO原理node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。Socket.io将Websocket... 查看详情

socket.io入门

...建一个chat-example文件夹，并建立一个package.json文件{"name":"socket-chat-example","version":"0.0.1","description":"myfirstsocket.ioapp","dependencies":{}}2 查看详情

socket.io入门原理

socket.io入门，简易聊天室(代码片段)

...。所以我们需要一个可以由服务端主动发出的协议，即WebSocket。WebSocket是HTML5新增的一种通信协议，其特点是服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，是真正的双向平等对话，属于服务器推送技... 查看详情

socket.io快入入门案例

socket.io基本介绍创建一个nodejs项目步骤1：创建项目目录步骤2：初始化nodejs项目目录结构命令：npminit-f结果如下：在nodejs项目安装socket.io模块命令：npminstallsokcet.iosocket.io网站：https://socket.io/socket.io快速入门案例客户端：index.html&l... 查看详情

Socket.io 私信通知

】Socket.io私信通知【英文标题】：Socket.ioprivatemessagenotification【发布时间】：2013-01-1004:29:39【问题描述】：嘿，***！我正在使用Laravel3开发一个社区，我正在尝试实现一些Facebook风格的私人消息传递。我完成了编码部分，但我和我... 查看详情

Socket IO 将 TCP 套接字消息输出到网页

】SocketIO将TCP套接字消息输出到网页【英文标题】：SocketIOtooutputaTCPsocketmessagetoawebpage【发布时间】：2018-05-1415:53:02【问题描述】：我正在试验NodeJS和SocketIO。我在这里查看了Socket.IO入门指南：https://socket.io/get-started/chat/。代码如... 查看详情

/socket.io/socket.io.js 中不提供 Socket.io

】/socket.io/socket.io.js中不提供Socket.io【英文标题】：Socket.ioisnotservedin/socket.io/socket.io.js【发布时间】：2012-12-2420:46:28【问题描述】：我已在此处阅读有关我在node.js中的问题的答案，但我的问题仍然存在。在服务器中使用socket.io，... 查看详情

Express.js 'socket.io/socket.io.js 404'

】Express.js\\\'socket.io/socket.io.js404\\\'【英文标题】：Express.js\'socket.io/socket.io.js404\'Express.js\'socket.io/socket.io.js404\'【发布时间】：2017-02-0207:36:19【问题描述】：我正在尝试在使用ExpressJS的网站http://clickthebutton.herokuapp.com上合并实查看详情

socket.io中文手册socket.io中文文档

socket.io中文手册，socket.io中文文档转载于：http://www.cnblogs.com/xiezhengcai/p/3956401.html服务端io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socketio.sockets.emit(‘String’,data);//给所有客户端广播消息io.socket 查看详情

socket.io中文手册socket.io中文文档

未找到 Socket.io.js（node.js + express + socket.io）

】未找到Socket.io.js（node.js+express+socket.io）【英文标题】：Socket.io.jsnotfound(node.js+express+socket.io)【发布时间】：2014-10-2022:06:51【问题描述】：我一直在检查其他相关答案，例如：node.js/socket.io/socket.io.jsnotfoundSocket.ionotbeingservedbyNode.j... 查看详情

使用androidnodejs和socket.io创建一个实时聊天应用程序(代码片段)

介绍WebSockets是非常漂亮的工具，它允许我们在现代Web应用程序中建立实时通信。事实上，这个机制非常强大，它被用来构建不同类型的应用程序，如实时聊天或通知系统等。在本文中，我们将向您展示如何使... 查看详情

socket.io，io 未定义（JS 错误）

】socket.io，io未定义（JS错误）【英文标题】：socket.io,ioisnotdefined(JSError)【发布时间】：2011-08-0322:25:59【问题描述】：我刚开始使用socket.io，它在客户端页面上给出JS错误io未定义如何解决这个问题？【问题讨论】：【参考方案1】... 查看详情

socket.io 中 io.on 和 socket.on 的区别

】socket.io中io.on和socket.on的区别【英文标题】：Differenceinio.onandsocket.oninsocket.io【发布时间】：2021-09-2612:55:06【问题描述】：此图是否正确表示节点js服务器中的io和套接字？我想说的是......首先我们写-constio=require("socket.io")(8080);... 查看详情

在 socket.io 的情况下出现错误“XMLHttpRequest 无法加载 /socket.io”

】在socket.io的情况下出现错误“XMLHttpRequest无法加载/socket.io”【英文标题】：Gettingerror\'XMLHttpRequestcannotload/socket.io\'incaseofsocket.io【发布时间】：2015-05-0506:25:14【问题描述】：我收到错误消息：“XMLHttpRequestcannotload/socket.io”forsock... 查看详情