1.利用socket.io插件制作一个聊天框，原理是输入对话，发送到服务，服务器在返回相应的对话，最后插入页面中，时间对话的功能，这里我是使用的node.js搭建的服务器。

附上源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<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="chat_fn()" />
<label>NickName:</label>
<input id="nickname" typee="text" name="nickname" />
<input id="chang_name" type="button" value="nickname" onclick="change_nickname()" />
<!--<script src="../../../../npm/node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>-->
<script src="http://localhost:8888/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://localhost:8888');
    socket.on("notice", function(data){
        var msg = document.getElementById('all').value;
        document.getElementById('all').innerText = msg + "\n" + data.message;
    });
     function chat_fn(){
        var msg = document.getElementById("message").value;
        socket.emit("chat", {message: msg});
    };
    var change_nickname = function(){
        var nickname = document.getElementById("nickname").value;
        socket.emit('setNickname',{nickname:nickname});
    };
</script>
</body>
</html>

服务器代码
/**
 * Created by on 2016/7/29.
 */
var app = require('http').createServer(handler)
    , io = require('../../../../npm/node_modules/socket.io').listen(app)
    , fs = require('fs');
app.listen(8888);

function handler (req, res) {
    fs.readFile('d://webstrom/yingtou/chart/index.html',
        function (err, data) {
            if (err) {
                res.writeHead(500);
                console.log(err);
                return res.end('Error loading index4.html');
            }
            res.writeHead(200);
            res.end(data);
        });
}

io.sockets.on('connection', function (socket) {
    socket.on("chat",function(data){
        console.log(data);
        socket.emit("notice", {message:  ":" + data.message});
        socket.broadcast.emit("notice", {message: ":" + data.message});
     console.log("chat: " + data.message);
    });
    socket.on("setNickname",function(data){
        socket.emit("notice", {message:  ":" + data.nickname});
        socket.broadcast.emit("notice", {message: ":" + data.nickname});
        console.log("name:"+data.nickname)
    })
});

socket.io插件调用的demo的更多相关文章

  1. Socket.io官方聊天室DEMO的学习笔记

    照着Socket.io官方的聊天室代码敲了一遍,遇到了一个奇怪的问题: 每次点击SEND按钮的时候,都会重新刷新页面. 在点击页面的一瞬间,看到了正在加载jquery的提示, 然后以为是jquery用 ...

  2. socket.io简单说明及在线抽奖demo

    socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...

  3. NodeJs多进程和socket.io通讯-DEMO

    一.开启多进程 const os = require('os'); const cp = require('child_process'); const forkList = {}; const fo ...

  4. socket.io emit callback调用探秘

    socket.io https://socket.io/ https://socket.io/docs/ What Socket.IO is Socket.IO is a library that e ...

  5. Node中的Socket.IO 简单Demo及说明

    注:下面Demo的Server和Client都是纯后端. 并没有web页面. Server端代码: var express = require('express'); var app = expres ...

  6. dotnet调用node.js写的socket服务（websocket/socket/socket.io）

    https://github.com/jstott/socketio4net/tree/develop socket.io服务端node.js,.里面有js写的客户端:http://socket.io ...

  7. 聊天功能插件Socket.io

    一.Socket.io是什么 是基于时间的实时双向通讯库 基于websocket协议的 前后端通过时间进行双向通讯 配合express快速开发实时应用 二.Socket.io和ajax区别 基于不同的 ...

  8. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  9. socket.io简单入门(一.实现简单的图表推送）

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

随机推荐

  1. FTP安装

    FTP 一.安装,挂第3张光驱 1.挂盘 2.进入cdrom中,路径:cd /mnt/cdrom 3.进入RPMS中,路径:cd /mnt/cdrom/RedHat/RPMS 4.查看版本为:vsft ...

  2. Spring Boot系列教程十：Spring boot集成Sentinel Redis

    前言 上一篇文章介绍了spring boot集成单点的redis,然而实际生产环境使用单点的redis风险很高,一旦宕机整个服务将无法使用,这篇文章介绍如何使用基于sentinel的redis高可用方 ...

  3. BZOJ1069 [SCOI2007]最大土地面积 【凸包 + 旋转卡壳】

    题目链接 BZOJ1069 题解 首先四个点一定在凸包上 我们枚举对角线,剩下两个点分别是两侧最远的点 可以三分,复杂度\(O(n^2logn)\) 可以借鉴旋转卡壳的思想,那两个点随着对角线的一定单 ...

  4. POJ1201 Intervals 【差分约束】

    题目链接 POJ1201 题解 差分约束 令\(a[i]\)表示是否选择\(i\),\(s[i]\)表示\(a[i]\)的前缀和 对\(s[i] \quad i \in [-1,50000]\)分别建 ...

  5. NOIP2017 宝藏 题解报告【状压dp】

    题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏.但是 ...

  6. POJ.2251 Dungeon Master （三维BFS）

    POJ.2251 Dungeon Master (三维BFS) 题意分析 你被困在一个3D地牢中且继续寻找最短路径逃生.地牢由立方体单位构成,立方体中不定会充满岩石.向上下前后左右移动一个单位需要一分 ...

  7. 复习JavaScript随手记

    数据类型 基本类型 string number boolean undefined number类型,包含整数浮点数 NaN和自己都不相等,涉及NaN的计算结果都是NaN isNaN()函数用于判断一 ...

  8. iOS之富文本(一)

    NSAttributedString叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化. 通过以下代码即可实现上面 ...

  9. 【题解】【LibreOJ Round #6】花团 LOJ 534 时间线段树分治 背包

    Prelude 题目链接:萌萌哒传送门(/≧▽≦)/ Solution 如果完全离线的话,可以直接用时间线段树分治来做,复杂度\(O(qv \log q)\). 现在在线了怎么办呢? 这其实是个假在线 ...

  10. 手脱JDPack

    1.PEID查壳 JDPack 2.载入OD,入口是一个pushad入栈,可以使用ESP,下硬件访问断点,shift+F9 0040E000 > pushad ; //入口 0040E001 E ...