- 服务器端广播文本
- 所有客户端都可以收到

--- 客户端

- 定义文本框
- 定义发送事件
textarea accesskey =t oninput="sendmsg();"
- 发送协议
ws:// 普通web-socket
wss:// 加密web-socket

客户端-创立连接

var ws,currentUser,ele;
window.onload = function() {
ws = new WebSocket("ws://my server:8887"); // 连接建立成功onopen事件会被调用
ws.onopen = function() {
$("status").innerHTML = 'online';
$("status").style.color = 'green'; // 消息接受成功会唤起消息
ws.onmessage = function(e) {
var msg;
try {
msg = JSON.parse(e.data);
} catch (SyntaxError) {
$("debug").innerHTML = "invalid message";
return false;
}
}

客户端-发送消息

function sendmsg()  {
ws.send($("ta").value);
}
// 关闭事件
ws.onclose = function(e){
$("status").innerHTML = 'offline';
$("status").style.color = 'red';
}; window.onunload = function(){
ws.close();
};

服务器端-创建连接

var ws = require(__dirname + '/lib/ws'),
server = ws.createServer();
var user_cols = {};
server.addListener ("connection", function(conn) {
var h = conn._server.man ager.length*70;
// 使用不同颜色标注用户ID
user_cols[conn.id] = "hsl("+h+",100%,30%)";
var msg = {};
msg.user = conn.id;
msg.color = user_cols[conn.id];
msg.text = "<em>一个新的用户加入聊天!</em>";
// 广播
conn.broadcast(JSO N.stringify(msg));
}

服务器端-监听广播

conn.addListener("message",  function(message) {
var msg = {};
// 防注入处理
message = message.replace(/</g, "&lt;");
message = message.replace(/>/g, "&gt;");
msg.text = message;
msg.user = conn.id;
msg.color = user_cols[conn.id];
// 输出内容
conn.write(JSON.st ringify(msg));
// 广播
conn.broadcast(JSO N.stringify(msg));
});
});

服务器端-关闭

server.addListener("close",  function(conn)  {
var msg = {};
msg.user = conn.id;
msg.color = user_cols[conn.id];
msg.text = "<em>一个用户已经离开了聊天!</em>";
conn.broadcast(JSO N.stringify(msg));
});
server.listen(8887);

HTML5之广播聊天室的更多相关文章

  1. web 开发之js---HTML5之广播聊天室

    那个头标题很有意思js做的 http://www.cnblogs.com/xgao/p/4200985.html

  2. h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

    这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...

  3. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

  4. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  5. WebSocket 网页聊天室的实现(服务器端:.net + windows服务,前端:Html5)

    websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...

  6. HTML5 - websocket的应用 之 简易聊天室

    需要知识点: 前端知识 jq操作dom nodejs socket.io 关于websocket api的知识点,见上篇章<HTML5-Websocket>. 聊天室思路/原理: A和B聊 ...

  7. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  8. php +html5 websocket 聊天室

    针对内容比较长出错,修改后的解码函数 和 加码函数 原文请看上一篇 http://yixun.yxsss.com/yw3104.html function uncode($str,$key){ $ma ...

  9. html5 websocket + node.js 实现网页聊天室

    1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 cli ...

随机推荐

  1. MediaPlayer开发全解析

    本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...

  2. Android使用百度定位SDK 方法及错误处理

    之前我的项目中的位置定位使用的是基站方法,使用的Google提供的API,但是前天中午突然就不返回数据了,到网上搜了一下才知道,Google的接 口不提供服务了,基于时间紧迫用了百度现有的SDK,但是 ...

  3. Scala Error: error while loading Suite, Scala signature Suite has wrong version expected: 5.0 found: 4.1 in Suite.class

    准备给scala项目引入单元测试 <dependency> <groupId>org.scalatest</groupId> <artifactId>s ...

  4. 小白日记2:kali渗透测试之被动信息收集(一)

    一.被动信息收集 被动信息收集指的是通过公开渠道可获得的信息,与目标系统不产生直接交互,尽量避免留下一切痕迹的信息探测.被动探测技术收集的信息可以大致分为两类, 即配置信息和状态信息. 被动探测可收集 ...

  5. 电商平台如何接入快递鸟电子面单API?

    快递鸟是全球物流接口服务商,为电商 ERP.电商平台.仓储.清关公司提供物流跟踪.电子面单.智选物流.物流金融.在线下单等服务,解决电商的物流管理模块和金融模块.现就对快递鸟电子面单API做基本描述, ...

  6. cocos2d-x中使用Http

    一.如何使用 //发送接口 void CmdHelper::postRequest(const char* cmdTag, const char* url, const char* postData, ...

  7. SSIS 学习(5):容器【转】

    容器是Integration Services 包中非常重要的一部分功能,它可以对控制流中的任务进行直观的划分与组织,使包的结构简明扼要.易于管理.易于维护. 在Integration Service ...

  8. LeetCode 242

    Valid Anagram Given two strings s and t, write a function to determine if t is an anagram of s. For ...

  9. 用Activator.CreateInstance代替new实现类的实例化(转)

    一直想得到这样一个函数,输入一个类的名称为参数,返回一个相应的类的实例. 这在工厂模式中是非常有用的 这样,可以使程序有更高的扩展性,例如,,下面的例子 如果现在有一个类,专门用来计算交通工具的速度, ...

  10. Java Concurrency - Phaser, Controlling phase change in concurrent phased tasks

    The Phaser class provides a method that is executed each time the phaser changes the phase. It's the ...