在前后端数据交互的时候我们经常使用的是ajax，用的是传统的http协议，而http协议有个致命的缺点，就是请求一结束，连接就断开了， 我们为了保持这个链接的，通常会使用cookie，而自从h5出现websocket之后，妈妈再也不用担心我的请求了，可以愉快的玩耍了，websocket是TCP协议，也就是所谓的“长连接”，可以一直保持，客户端与服务端的连接，交互起来自然是so easy ,to happy,这两天利用工作之余，写了一个基于nodejs和websocket的聊天室，只为说明原理，没有做任何的样式，不喜勿喷

这是客户端：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input type="text" id="input"/>

		<input type="button" value="发送" id="btn"/>

	</body>

	<script>

		var websocket = new WebSocket("ws://localhost:3000/");

		function showMessage(type,str){

			var div = document.createElement('div');

			div.innerHTML = str;

			if(type == 'enter'){

				div.style.color = 'blue';

			}else if(type == 'leave'){

				div.style.color = 'red';

			}

			document.body.appendChild(div);

		}

		websocket.onopen = function(){			//连接成功后的回调

			document.getElementById('btn').onclick = function(){

				var txt = document.getElementById('input').value;

				if(txt){

					websocket.send(txt);

				}

			}

		}

		websocket.onclose = function(){		//关闭连接的回调

		}

		websocket.onmessage = function(e){		//发送消息的回掉

			var msg = JSON.parse(e.data);

			showMessage(msg.type,msg.data);

		}

	</script>

</html>

　这是服务端：

var ws = require("nodejs-websocket")    //导入nodejs-websocket模块

var PORT = 3000;

var clientCount = 0;

// Scream server example: "hi" -> "HI!!!"

var server = ws.createServer(function (conn) {        //建立连接时

    console.log("New connection")

    clientCount++;

    conn.nickname = 'user'+clientCount;                //每一个用户名

    var msg = {};

    msg.type = "enter";        //消息的类型，

    msg.data = conn.nickname + '  进入了聊天室';

    msg = JSON.stringify(msg);    //数据格式化

    broadcast(msg);        //用于广播数据

    console.log(msg);

    conn.on("text", function (str) {

        console.log("Received "+str)

        var msg = {};

        msg.type = 'message';

        msg.data = conn.nickname + '：' + str;

        msg = JSON.stringify(msg);

        broadcast(msg);

    })

    conn.on("close", function (code, reason) {        //链接关闭的回调，注意这个一定要写，否则在关闭页面的时候，服务会抛异常；

        console.log("Connection closed")

        var msg = {};

        msg.type = 'leave';

        msg.data = conn.nickname +'离开了';

        msg = JSON.stringify(msg);

        broadcast(msg);

    })

    conn.on("error", function (err) {    //出错时候的回调；

        console.log(err);

    })

}).listen(PORT);

function broadcast(str){

    server.connections.forEach(function(connection){    //遍历所有的链接

        connection.sendText(str);                        //给每一个链接发送数据

    });

}

有说的不对的欢迎大家吐槽，大家相互学习。

websocket搭建的聊天室的更多相关文章

  1. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...

  2. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

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

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

  4. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  5. SpringBoot 搭建简单聊天室

    SpringBoot 搭建简单聊天室(queue 点对点) 1.引用 SpringBoot 搭建 WebSocket 链接 https://www.cnblogs.com/yi1036943655/p ...

  6. SilverLight搭建WCF聊天室详细过程[转]

    http://www.silverlightchina.net/html/zhuantixilie/getstart/2011/0424/7148.html 默认节点 SilverLight搭建WCF ...

  7. 分享基于 websocket 网页端聊天室

    博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...

  8. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  9. workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）

    workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...

随机推荐

  1. 通过git命令“六步”提交新项目到码云

    通过git命令“六步”提交新项目到码云 一.初始化本地仓库 git init 二.添加文件 git add . 三.添加远程数据仓库链接 git remote add origin https://g ...

  2. WDL学习笔记

    WDL是什么? WDL是由Broad Institute开发的一种流程开发语言,全称workflow description language,官方链接如下:https://software.broa ...

  3. Flink状态管理和容错机制介绍

    本文主要内容如下: 有状态的流数据处理: Flink中的状态接口: 状态管理和容错机制实现: 阿里相关工作介绍: 一.有状态的流数据处理# 1.1.什么是有状态的计算# 计算任务的结果不仅仅依赖于输入 ...

  4. QPS、TPS、PV、UV、GMV、IP、RPS？

    QPS.TPS.PV.UV.GMV.IP.RPS QPSQueries Per Second,每秒查询数.每秒能够响应的查询次数. QPS是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准, ...

  5. 迅雷下载敏感资源 迅雷应版权方要求无法下载 μTorrent使用方法（六种方法，值得你看）(22)

    1. 解决方案1 1.1 声明 此方法只适用于迅雷极速版,迅雷X不管用. 修改后下载有些磁力链接或种子,依然无反应.不是说该方法无效,而是有些种子资源不佳,很难下载,需要等半天才能连接上开始下载.如果 ...

  6. google test 打印派生类对象

    在Unison中使用google test时,发现EXPECT_EQ在fail时,不能打印Unison Test Language中定义的派生类的对象.于是写了个纯C++的示例,发现在只定义基类的op ...

  7. 用selenium控制已打开的浏览器

    在使用selenium进行自动化测试会遇到,手工打开浏览器,做了一部分操作后,并打开相关页面后再执行相关的自动化脚本. 如何使用selenium来接管先前已打开的浏览器呢?醍提出一个Google Ch ...

  8. wx.request 请求

    wx.request 1.wx.request相当于ajax请求,和django后台进行交互 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...

  9. WUSTOJ 1318: 区间的连通性（Java）

    题目链接:

  10. php获取当前月的天数

    <?php //php获取当前月份的所有天数 $start_day = date('Ym01', time()); $end_day = date('Ymd', strtotime(" ...