程序的流程图:

主要代码:

服务端 app.js

先加载所需要的通信模块:

var express = require('express');
var app = express();
var http = require('http').createServer(app);
var io = require('socket.io').listen(http);
var fs = require('fs');

创建用户列表和消息列表:

var person = [];
var history = [];

绑定并监听80端口:

app.get('/',function (req,res) {
res.sendFile(__dirname + '/login.html');
}); http.listen(80,function () {
console.log('listening on *:80');
});

客户端连接成功后,触发响应事件connection,完成要绑定的事件并实现客户端出发的事件:

io.sockets.on('connection',function (socket) {
var user = ''; socket.emit('history', history);
io.sockets.emit('updatePerson', person); socket.on('sendMsg', function (data) {
var obj = {};
obj.content = data;
obj.time = now();
obj.name = user;
if (history.length === history_num) {
history.shift();
}
history.push(obj);
io.sockets.emit('news', obj);
}); socket.on('setUserName', function (data) {
user = data;
person.push(user);
io.sockets.emit('loginsucess');
io.sockets.emit('updatePerson', person);
io.sockets.emit('news', {content: user + '进入房间', time: now(), name: '系统消息'});
}); socket.on('disconnect', function () {
if (user !== '') {
person.forEach(function (value, index) {
if (value === user) {
person.splice(index, 1);
}
});
io.sockets.emit('news', {content: user + '离开房间', time: now(), name: '系统消息'});
io.sockets.emit('updatePerson', person);
}
});
});

客户端 index.js:

先初始化用户信息:

 $scope.data = [];     //消息队列
$scope.name = ''; //用户名
$scope.content = ''; //用户输入的消息
$scope.personlist = []; //用户队列

然后连接服务器端:

const  socket_url = 'http://localhost';
var socket = io.connect(socket_url);

连接成功后,对用户昵称输入的验证:

$scope.checkName = function () {
if($scope.name!==''){
if($scope.personlist.length!==0){
if($scope.personlist.indexOf($scope.name)>-1) {
document.getElementById("info").textContent = "该昵称已被占用,请重新输入";
}
else{
socket.emit('setUserName', $scope.name);
}
}
else{
socket.emit('setUserName', $scope.name);
}
}
else{
document.getElementById('name').focus();
}
};

验证成功后,对用户输入消息要触发的事件:

$scope.sendMsg = function(data){
var date = new Date();
data = $scope.content;
if($scope.content !== ''){
socket.emit('sendMsg',data);
}
$scope.content = '';
};

程序的部分运行测试结果:

浏览器输入localhost后展示的用户登录界面:

昵称重复后的提示:

昵称输入成功后进入当前用户的聊天界面:

源码地址:github

参考学习:

Node.js + Web Socket 打造即时聊天程序嗨聊

基于websocket的一个简单的聊天室

websocket实现简单聊天程序的更多相关文章

  1. 基于html5 localStorage , web SQL, websocket的简单聊天程序

    new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var send ...

  2. Android 网络编程基础之简单聊天程序

    前一篇讲了Android的网络编程基础,今天写了一个简单的聊天程序分享一下 首先是服务端代码: package com.jiao.socketdemo; import java.io.Buffered ...

  3. 用swoole和websocket开发简单聊天室

    首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中.第二,代码中一定要有日志记录和完善的报错并记录报错.言归正传,swoole应该是每个phper必须要了解的, ...

  4. Netty 系列八(基于 WebSocket 的简单聊天室).

    一.前言 之前写过一篇 Spring 集成 WebSocket 协议的文章 —— Spring消息之WebSocket ,所以对于 WebSocket 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...

  5. Java网络编程--简单聊天程序

    背景 毕业设计前的练手,学校小比赛中的一个题目. 开发环境 Java(eclipse)+Mysql 简介 使用Java+Mysql开发以个简单的聊天工具,在本次项目中实现了: 1. 用户登录(客户端至 ...

  6. Flask基于websocket的简单聊天室

    1.安装gevent-websocket pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ gevent-websocket 2.cha ...

  7. WebSocket 搭建简单聊天网站

    HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏 ...

  8. Python使用Socket写一个简单聊天程序

    b2b模式的聊天工具 服务端: # 链接 while True: print('等待连接...') sock,adr = server_socket.accept() while True: try: ...

  9. 基于websocket的页面聊天程序

    注:主要的问题是当浏览器窗口直接关闭时,后台会报异常,因为后台还在继续向浏览器端写数据,但是浏览器已经关闭了,会报java.net.SocketException:peer:Socket write ...

随机推荐

  1. Java中使用POI读取大的Excel文件或者输入流时发生out of memory异常参考解决方案

    注意:此参考解决方案只是针对xlsx格式的excel文件! 背景 前一段时间遇到一种情况,服务器经常宕机,而且没有规律性,查看GC日志发生了out of memory,是堆溢出导致的,分析了一下堆的d ...

  2. python中的类属性和实例属性

    属性就是属于一个对象的数据或者函数,我们可以通过句点(.)来访问属性,同时 Python 还支持在运作中添加和修改属性. 我们先来看看类里面的普通字段: class Test(object): nam ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

  4. NYOJ--21--bfs--三个水杯

    /* 输入 第一行一个整数N(0<N<50)表示N组测试数据 接下来每组测试数据有两行,第一行给出三个整数V1 V2 V3 (V1>V2>V3 V1<100 V3> ...

  5. NYOJ-63 小猴子下落(二叉树及优化算法详解)

      小猴子下落 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 有一颗二叉树,最大深度为D,且所有叶子的深度都相同.所有结点从左到右从上到下的编号为1,2,3,··· ...

  6. 某安寿险HR核人面试问题总结,技术面波澜不惊,HR面反而有被暴击感

    之前朋友推荐了某安寿险的技术类职位.经过IQ/EQ网上笔试,技术面之前的java基础笔试和技术面试,基本上没什么意外的.昨天晚上7点安排的HR核人面试(他们的人力部门的工作负荷比较大,目前这个部门处于 ...

  7. [填坑]树上差分 例题:[JLOI2014]松鼠的新家(LCA)

    今天算是把LCA这个坑填上了一点点,又复习(其实是预习)了一下树上差分.其实普通的差分我还是会的,树上的嘛,也是懂原理的就是没怎么打过. 我们先来把树上差分能做到的看一下: 1.找所有路径公共覆盖的边 ...

  8. 怎么用snapman一个人在三天内开发出一个复杂的软件开发项目管理系统

    snapman是一个简单而强大的团队协作软件,在上面的信息可以是数据.可以是规则.也可以是自动化代码:最重要的它是一个可以开发的协作平台,所有信息都可以作用到所有人或机器上,大大减少了工作的复杂度.软 ...

  9. 在windows平台下electron-builder实现前端程序的打包与自动更新

    由于8月份上旬公司开发一款桌面应用程序,在前端开发程序打包更新时遇到一些困扰多日的问题,采用electron-builder最终还是得到解决~ 以下是踩坑的过程及对electron打包与更新思路的梳理 ...

  10. Entity Framework 帮助文档

    Entity Framework (EF) 帮助文档 在代码中定义实体,并生成数据库模型 原文链接 基于已有数据库创建 Code First 实体模型 原文链接 Entity Framework Fl ...