聊天室页面-->index.html

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>初识WebSocket</title>

</head>

<body>

	<h1>Chat Room</h1>

	<div style="margin-top: 30px;margin-left:30px">

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

		<button id="send">send</button>

		<div id="notice"></div>

		<div id="msg"></div>

	</div>

</body>

<script src="websocket.js"></script>

</html>

　　

发送请求与接受响应-->websocket.js

var info = document.getElementById("info");

var send= document.getElementById("send");

var notice = document.getElementById("notice");

var msg = document.getElementById("msg");

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

ws.onopen = function(){

	notice.innerHTML = "websocket connected";

}

ws.onclose = function(){

	notice.innerHTML = "closed"

}

ws.onmessage = function(response){

	console.log(response);

	//收到message后，创建一个div，保存消息，并追加到msg中。

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

	var json = JSON.parse(response.data);

	switch(json.type){

		case "enter":

			div.innerHTML = "<font color='blue'>" + json.data + "</font>";

			break;

		case "message":

			div.innerHTML = "<font color='orange'>" + json.data + "</font>";

			break;

		default:

			div.innerHTML = "<font color='brown'>" + json.data + "</font>";

			break;

	}

	msg.appendChild(div);

}

send.onclick = function(){

	ws.send(info.value)

}

　　

WebSocket服务器-->server.js

var ws = require("nodejs-websocket")

var port = 8001;

var count = 0;//client的计数器

function broadcast(server, msg) {

	//server.connections是一个数组，保存着所有client

    server.connections.forEach(function (connection) {

        connection.sendText(msg);

    });

}

var server = ws.createServer(function (conn) {

    console.log("New connection");

    count++;

    conn.nickname = "user" + count;

    var msg = {

    	"type" : "enter",

    	"data" : conn.nickname + " come in"

    }

    broadcast(server, JSON.stringify(msg));

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

        console.log("Received From: "+ conn.nickname + " ----  Data:" + str);

        var msg = {

	    	"type" : "message",

	    	"data" : conn.nickname + ": " + str

	    }

	    broadcast(server, JSON.stringify(msg));

    });

    conn.on("close", function (code, reason) {

    	var msg = {

	    	"type" : "left",

	    	"data" : conn.nickname + " left the room"

	    }

	    broadcast(server, JSON.stringify(msg));

        console.log("Connection closed");

    });

    conn.on("error", function(err){

    	console.log("some accident happend");

    	console.log(err);

    });

});

console.log("websocket started , listening " + port)

server.listen(port)

　　

WebSocket实现一个聊天室的更多相关文章

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

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

  2. web即时通讯2--基于Spring websocket达到web聊天室

    如本文所用,Spring4和websocket要构建web聊天室,根据框架SpringMVC+Spring+Hibernate的Maven项目,后台使用spring websocket进行消息转发和聊 ...

  3. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

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

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

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

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

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

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

  7. 使用原生node写一个聊天室

    在学习node的时候都会练习做一个聊天室的项目,主要使用socket.io模块和http模块.这里我们使用更加原始的方式去写一个在命令行聊天的聊天室. http模块,socket.io都是高度封装之后 ...

  8. 利用socket.io构建一个聊天室

    利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...

  9. Websocket直播间聊天室教程 - GoEasy快速实现聊天室

    最近两年直播那个火啊,真的是无法形容!经常有朋友问起,我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢? 今天小编就手把手的教你用GoEasy做一个聊天室,当然也可以用于直播间内的互动.全 ...

随机推荐

  1. 讲解wpe抓包,封包

    相信大多数朋友都是会使用WPE的,因为这里也有不少好的教程,大家都辛苦了!先说说接触WPE的情况.当时好像是2011年,我本来不知道WPE对游戏竟有如此大的辅助作用的.起先找WPE软件的时候,只是因为 ...

  2. 回调函数的原理及PHP实例

    背景:在最近的一个开发项目中,用户要先调用服务才能开始进行一系列的查询活动,想了好久,经同事提醒, 用回调函数即可解决该问题.在这里,对PHP下回调函数的原理及实现分别做一下讲解. 1 什么是回调 软 ...

  3. LeetCode算法题-Path Sum（Java实现）

    这是悦乐书的第169次更新,第171篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第28题(顺位题号是112).给定二叉树和整数sum,确定树是否具有根到叶路径,使得沿路 ...

  4. LeetCode算法题-Balanced Binary Tree（Java实现）

    这是悦乐书的第167次更新,第169篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第26题(顺位题号是110).给定二叉树,判断它是否是高度平衡的.对于此问题,高度平衡二 ...

  5. Ubuntu 12.04上安装R语言

    Ubuntu 12.04上安装R语言 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ R的安装 sudo gedit /etc/apt/sources. ...

  6. nuxt项目部署

    前提: linux服务器  一.安装node ① 下载 cd /usr/local/src/ wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-l ...

  7. Java面试知识点之线程篇（一）

    前言:在Java面试中,一定会遇到线程相关问题,因此笔者在这里总结Java中有关线程方面知识点,多数从网上得来(文中会贴出主要参考链接),有些也是笔者在面试中所遇到的问题,如有错误,请不吝指正.主要参 ...

  8. linux学习笔记整理（四）

    第五章 Vim编辑器和恢复ext4下误删除的文件-Xmanager工具本节所讲内容:5.1 vim的使用5.2 实战:恢复ext4文件系统下误删除的文件5.3 实战:使用xmanager等远程连接工具 ...

  9. access数据库查找以及如果结果中存在多个匹配用户该怎么处理？

    查找用户的界面为: 首先对查找条件进行赋值: if (radioButton1.Checked) serMatchInfo = "用户姓名"; if (radioButton2.C ...

  10. 生成对抗网络（GAN）

    GAN的全称是 Generative Adversarial Networks,中文名称是生成对抗网络.原始的GAN是一种无监督学习方法,巧妙的利用“博弈”的思想来学习生成式模型. 1 GAN的原理 ...