本文原文地址：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+"\r\n";

 });

 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+"\r\n";

 sendMsg.value="";

 });

</script>

</body>

</html>

界面效果如下：

socket.io 入门篇（一）的更多相关文章

  1. socket.io 入门篇（三）

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  2. socket.io 入门篇（二）

    本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...

  3. socket.io入门整理教程

    socket.io入门整理  发布于 5 年前  作者 dtrex  124983 次浏览  最后一次编辑是 1 年前 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...

  4. Socket.io 入门 - Renyi的博客

    Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...

  5. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  6. socket.io 入门教程

    转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...

  7. 转载：socket.io 入门

    原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...

  8. socket.io入门整理

    我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序. 最最开始 先安装socket.io: 1 npm install socket.io 利用Nod ...

  9. socket.io入门示例参考

    参考示例地址:http://www.linchaoqun.com/html/cms/content.jsp?menu=nodejs&id=1480081169735

随机推荐

  1. （@WhiteTaken）设计模式学习——代理模式

    今天学习了一下代理模式,代理模式分为很多种.目前感觉有两种是需要学习一下的. 静态代理模式 动态代理模式 1. 静态代理模式 需要被代理的类,实现一个或者多个接口. 代理类需要实现被代理类的接口,在此 ...

  2. 关于限制DHCP服务器广播的另类方法

    0. 引言 如图,家里有两台计算机,分别处于不同房间.其中一台PC1能够与光猫直连:另外一台PC2较远,考虑到光猫有WLAN功能,便使用了一个路由器无线桥接到光猫,然后有线连接到PC2(均与光猫处于同 ...

  3. socket__服务端、客户端（注释版）

    # !/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/22 16:14 # @Author : Mr_zhang # @Sit ...

  4. JavaScript正则表达式之分组匹配 / 反向引用

    语法 元字符:(pattern) 作用:用于反复匹配的分组 属性$1~$9 如果它(们)存在,用于得到对应分组中匹配到的子串 \1或$1 用于匹配第一个分组中的内容 \2或$2 用于匹配第一个分组中的 ...

  5. shell编程/字库裁剪(3)——验证

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7712496.html 作者:窗户 Q ...

  6. IO 调优

    磁盘优化 1.增加缓存 2.优化磁盘的管理系统 3.设计合理的磁盘存储数据块 4.应用合理的RAID策略 TCP网络参数调优 网络IO优化 1.减少网络交互次数 2.减少网络传输数据量的大小 3.尽量 ...

  7. [Java Web 第一个项目]客户关系处理系统（CRM）项目总结

    一.table的应用: 1.表格的常用属性 基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔).cellpadd ...

  8. R学习笔记 第二篇：矩阵、数组和列表

    向量是一维的,只有长度(行),没有其他维度.R中存在更高维度的对象,他们是矩阵,数据框,数组.这些对象的下标都是使用中括号[],第一个维度是row,第二个维度是column,依次类推,[row,col ...

  9. C#设计模式之十一外观模式（Facade）【结构型】

    一.引言 快12点半了,要开始今天的写作了.很快,转眼设计模式已经写了十个了,今天我们要讲[结构型]设计模式的第五个模式,该模式是[外观模式],英文名称是:Facade Pattern.我们先从名字上 ...

  10. 老大哥在看着你！我国部署超2000万个AI监控系统

    原文:Big brother is watching you! China installs 'the world's most advanced video surveillance system' ...