from:https://blog.csdn.net/u010136741/article/details/51612594

【总目录】

【实例简介】

本文，我们通过nodejs和javascript实现一个网页聊天室的demo。主要包括，聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播给其他用户！

【效果图】

【客户端】

web页面主要呈现在线人数，聊天信息，一个输入框和发送按钮，上代码:

<!DOCTYPE html>
<html lang="cn">
<head>
<title>WebSocket chart application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/tether/1.3.2/css/tether.css"/>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js" ></script>
<script src="http://cdn.bootcss.com/tether/1.3.2/js/tether.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
<script>
var ws= new WebSocket('ws://www.liumumu.top:8180');
var nickname;
ws.onopen = function(e){
console.log('Connection to server opened');
}
function appendLog(type,nickname, message,clientcount) {
var messages = document.getElementById('messages');
var messageElem = document.createElement("li");
var preface_label;
if(type==='notification') {
preface_label = "<span class=\"label label-info\">*</span>";
} else if(type==='nick_update') {
preface_label = "<span class=\"label label-warning\">*</span>";
} else {
preface_label = "<span class=\"label label-success\">" + nickname + "</span>";
}
var message_text = "<h2>" + preface_label + " " + message + "</h2>";
messageElem.innerHTML = message_text;
messages.appendChild(messageElem);
var count_people = document.getElementById("count_people");
count_people.innerHTML = clientcount;
}
ws.onmessage = function(e){
var data = JSON.parse(e.data);
nickname = data.nickname;
appendLog(data.type,data.nickname, data.message,data.clientcount);
console.log("ID: [%s] = %s", data.id, data.message);
}
function sendMessage(){
var message = $('#message').val().trim();
if(message.length<1){
alert("不能发送空内容！");
return;
}
ws.send($('#message').val());
$('#message').val("");
$('#message').focus();
console.log(ws.bufferedAmount);
}
</script>
</head>
<body lang="cn">
<div class="vertical-center">
<div class="container">
<h2>多人在线聊天DEMO</h2>
<hr />
<p>当前在线人数：<span id="count_people">0</span></p>
<ul id="messages" class="list-unstyled">
</ul>
<hr />
<form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
<div class="form-group">
<input class="form-control" type="text" name="message" id="message"
placeholder="输入聊天内容" value="" autofocus/>
</div>
<button type="button" id="send" class="btn btn-primary"
onclick="sendMessage();">发送!</button>
</form>
</div>
</div>
</body>
</html>

javascript 部分，连接websocket成功之后，主要是监听数据返回，和发送数据。

当用户编辑好内容，点击发送按钮是调用sendMessage方法，发送数据，如果需要修改昵称，则发送数据格式为"/nick 昵称"。

当服务器返回数据到客户端，我们通过appendLog方法对数据做处理，根据type字段，判断是显示用户离线在线信息，还是显示聊天信息。最后更新在线人数。

【服务器端】

服务器端主要是接收信息，判断是聊天信息还是重命名信息，然后发送广播。同时，当用户连接上服务器端或者关闭连接时，服务器也会发送广播通知其他用户。

var WebSocket = require('ws');
var WebSocketServer = WebSocket.Server,
wss = new WebSocketServer({port: 8180});
var uuid = require('node-uuid');
var clients = [];
function wsSend(type, client_uuid, nickname, message,clientcount) {
for(var i=0; i<clients.length; i++) {
var clientSocket = clients[i].ws;
if(clientSocket.readyState === WebSocket.OPEN) {
clientSocket.send(JSON.stringify({
"type": type,
"id": client_uuid,
"nickname": nickname,
"message": message,
"clientcount":clientcount,
}));
}
}
}
var clientIndex = 1;
wss.on('connection', function(ws) {
var client_uuid = uuid.v4();
var nickname = "游客"+clientIndex;
clientIndex+=1;
clients.push({"id": client_uuid, "ws": ws, "nickname": nickname});
console.log('client [%s] connected', client_uuid);
var connect_message = nickname + " 来了";
wsSend("notification", client_uuid, nickname, connect_message,clients.length);
ws.on('message', function(message) {
if(message.indexOf('/nick') === 0) {
var nickname_array = message.split(' ');
if(nickname_array.length >= 2) {
var old_nickname = nickname;
nickname = nickname_array[1];
var nickname_message = "用户 " + old_nickname + " 改名为： " + nickname;
wsSend("nick_update", client_uuid, nickname, nickname_message,clients.length);
}
} else {
wsSend("message", client_uuid, nickname, message,clients.length);
}
});
var closeSocket = function(customMessage) {
for(var i=0; i<clients.length; i++) {
if(clients[i].id == client_uuid) {
var disconnect_message;
if(customMessage) {
disconnect_message = customMessage;
} else {
disconnect_message = nickname + " 走了";
}
clients.splice(i, 1);
wsSend("notification", client_uuid, nickname, disconnect_message,clients.length);
}
}
}
ws.on('close', function() {
closeSocket();
});
process.on('SIGINT', function() {
console.log("Closing things");
closeSocket('Server has disconnected');
process.exit();
});
});

我们定义了wsSend函数用来处理消息的广播。对每个连接的用户，我们默认给他分配为游客。为了实现广播，我们用clients数组来保存连接的用户。

WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室的更多相关文章

Spring WebSocket初探2 (Spring WebSocket入门教程)<转>
See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...
PySide——Python图形化界面入门教程(五)
PySide——Python图形化界面入门教程(五) ——QListWidget 翻译自:http://pythoncentral.io/pyside-pyqt-tutorial-the-qlistw ...
Elasticsearch入门教程(五)：Elasticsearch查询(一)
原文:Elasticsearch入门教程(五):Elasticsearch查询(一) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...
RabbitMQ入门教程(五)：扇形交换机发布/订阅(Publish/Subscribe)
原文:RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...
无废话ExtJs 入门教程五[文本框：TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
转：Scrapy安装、爬虫入门教程、爬虫实例（豆瓣电影爬虫）
Scrapy在window上的安装教程见下面的链接:Scrapy安装教程上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...
Scrapy安装、爬虫入门教程、爬虫实例（豆瓣电影爬虫）
Scrapy在window上的安装教程见下面的链接:Scrapy安装教程上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...
vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
使用Servlet和JSP实现一个简单的Web聊天室系统
1 问题描述利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...

随机推荐

javascript的基本类型剖析:
javascript的基本数据类型包含 string,number,boolean,function,object,undified基本的6的基本数据类型这篇文章就主要介绍一下这六种基本数据类型的主 ...
hdu1350Taxi Cab Scheme (最小路径覆盖)
Taxi Cab Scheme Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
wcf json asp.net json
function BindNewsTypeTree() { var parentid; // $.getJSON(serviceUrl + "NewsTypeService.svc/GetN ...
scott权限
有时scott数据被破坏了可以回复以下为安装路径 dos下 @G:\app\Administrator\product\11.2.0\dbhome_1\RDBMS\ADMIN\scott. ...
中小型研发团队架构实践：任务调度Job
一.Job 简介 Job 类似于数据库中的作业,多用于实现定时执行任务.适用场景主要包括定时轮询数据库同步.定时处理数据.定时邮件通知等. 我们的 Job 分为操作系统级别定时任务 WinJob 和 ...
pandas知识点汇总
## pandas基础知识汇总 1.时间序列 import pandas as pd import numpy as np import matplotlib.pyplot as plt from d ...
EMQ 学习---订阅$SYS主题，捕获客户端上下线消息
acl.config文件定义了可订阅$SYS主题的权限. {allow, {user, "dashboard"}, subscribe, ["$SYS/#"]} ...
C# Interview Questions:C#-English Questions
This is a list of questions I have gathered from other sources and created myself over a period of t ...
Atiti. Php Laravel 5.1 环境搭建以及 error 排除
Atiti. Php Laravel 5.1 环境搭建以及 error 排除 1. php_5.6.11_apache2.41 1.1. Httpd.Conf增加以下配置,添加php支持1 1.2. ...
Atitti. 语法树AST、后缀表达式、DAG、三地址代码
Atitti. 语法树AST.后缀表达式.DAG.三地址代码抽象语法树的观点认为任何复杂的语句嵌套情况都可以借助于树的形式加以描述.确实,不得不承认应用抽象语法树可以使语句翻译变得相对容易,它很好地 ...

WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室