在前后端数据交互的时候我们经常使用的是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. -webkit-overflow-scrolling : touch 快速滚动 回弹 效果

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...

  2. java学习笔记（7）--链表

    标签(空格分隔):笔记 java其实已经将很多底层的数据结构进行了封装,虽然工作用不到,但是笔试和面试问的还是比较频繁的,而且这种面试题还是直接手撕代码,故专门总结一下. 1. 概念 1.1 链表(L ...

  3. servlet02

    内容  1servlet   2HTTP协议  3Request servlet继承的体系结构   抽象类 | GenericServlet:将servlet接口中其他方法默认空实现,只将servic ...

  4. DataGridView中的Combobox的应用

    在WinForm中DataGridView可谓是应用比较多的数据显示控件了,DataGridView中可以应用各种控件,关于这样的文章网上 已有很多.都是实例化一个控件然后通过DataGridView ...

  5. [.NET Core] - 使用 EF Core 的 Scaffold-DbContext 脚手架命令创建 DbContext

    Scaffold-DbContext 命令 参数 Scaffold-DbContext [-Connection] <String> [-Provider] <String> ...

  6. JAVA线程中的发牌题

    发牌题主要考虑的就是线程的问题,一个buffer缓冲区的问题, 首先,发牌的优先级当然是最高的了,但是取牌不能有优先级,否则会一直有牌先取,因此需要一个信号量order,当order=线程的数字时,取 ...

  7. visio 绘图素材

    1. 前言 visio是个绘图的好工具,可是自带图形元素有限,没有还要自己画. 推荐几个矢量图形素材库,里边有很多图形,很方便的导入到visio中,放大也不失真. 阿里巴巴矢量图库网 stockio ...

  8. CSS的三种基本框架

    CSS的三类选择器 1.css-css的基本选择器(三种) 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2) ...

  9. sublime3 安装markdown插件

    sublime3 安装markdown插件 第一步安装package control 自动安装package control 手动安装package control 安装具体的markdown相关的p ...

  10. mysql优化limit

    limit 1.当只需要一条数据的时候,用limit1: 2.当需要提高分页效率的时候: 如果用上面的语句分页少量数据还是可以用的,但是随着数据量越来越大,直接用limit语句查询速度就会越来越慢,降 ...