查看: 829|回复: 0

[DIV/CSS] websocket实现简单聊天程序

发表于 2017-9-24 08:00:05
尚学堂AD
程序的流程图:

主要代码: 服务端 app.js

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

  1. var express = require('express');
  2. var app = express();
  3. var http = require('http').createServer(app);
  4. var io = require('socket.io').listen(http);
  5. var fs = require('fs');
复制代码

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

  1. var person = [];
  2. var history = [];
复制代码

绑定并监听80端口:

  1. app.get('/',function (req,res) {
  2. res.sendFile(__dirname + '/login.html');
  3. });
  4. http.listen(80,function () {
  5. console.log('listening on *:80');
  6. });
复制代码

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

  1. io.sockets.on('connection',function (socket) {
  2. var user = '';
  3. socket.emit('history', history);
  4. io.sockets.emit('updatePerson', person);
  5. socket.on('sendMsg', function (data) {
  6. var obj = {};
  7. obj.content = data;
  8. obj.time = now();
  9. obj.name = user;
  10. if (history.length === history_num) {
  11. history.shift();
  12. }
  13. history.push(obj);
  14. io.sockets.emit('news', obj);
  15. });
  16. socket.on('setUserName', function (data) {
  17. user = data;
  18. person.push(user);
  19. io.sockets.emit('loginsucess');
  20. io.sockets.emit('updatePerson', person);
  21. io.sockets.emit('news', {content: user + '进入房间', time: now(), name: '系统消息'});
  22. });
  23. socket.on('disconnect', function () {
  24. if (user !== '') {
  25. person.forEach(function (value, index) {
  26. if (value === user) {
  27. person.splice(index, 1);
  28. }
  29. });
  30. io.sockets.emit('news', {content: user + '离开房间', time: now(), name: '系统消息'});
  31. io.sockets.emit('updatePerson', person);
  32. }
  33. });
  34. });
复制代码
客户端 index.js:

先初始化用户信息:

  1. $scope.data = []; //消息队列
  2. $scope.name = ''; //用户名
  3. $scope.content = ''; //用户输入的消息
  4. $scope.personlist = []; //用户队列
复制代码

然后连接服务器端:

  1. const socket_url = 'http://localhost';
  2. var socket = io.connect(socket_url);
复制代码

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

  1. $scope.checkName = function () {
  2. if($scope.name!==''){
  3. if($scope.personlist.length!==0){
  4. if($scope.personlist.indexOf($scope.name)>-1) {
  5. document.getElementById("info").textContent = "该昵称已被占用,请重新输入";
  6. }
  7. else{
  8. socket.emit('setUserName', $scope.name);
  9. }
  10. }
  11. else{
  12. socket.emit('setUserName', $scope.name);
  13. }
  14. }
  15. else{
  16. document.getElementById('name').focus();
  17. }
  18. };
复制代码

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

  1. $scope.sendMsg = function(data){
  2. var date = new Date();
  3. data = $scope.content;
  4. if($scope.content !== ''){
  5. socket.emit('sendMsg',data);
  6. }
  7. $scope.content = '';
  8. };
复制代码
程序的部分运行测试结果:

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

昵称重复后的提示:

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

源码地址:github

参考学习:

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

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



回复

使用道具 举报