当前位置:首页 > 编程教程 > node技术文章 > WebSocket实现简单客服聊天系统

WebSocket实现客服聊天系统实例详解

  • 发布时间:
  • 作者:码农之家
  • 点击:214

这篇文章主要知识点是关于WebSocket、客服聊天、实例详解、WebSocket实现Web聊天室功能 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Node.js硬实战:115个核心技巧
  • 类型:Node.js大小:212 MB格式:PDF作者:亚历克斯·荣
立即下载

WebSocket实现简单客服聊天系统

一 需求

一个多商家的电商系统,比如京东商城,不同商家之间的客服是不同的,所面对的用户也是不同的。要实现这样一个电商系统的客服聊天系统,那该系统就必须是一个支持多客服、客服一对多用户的聊天系统。

二 思路

使用 Node.js 搭建服务器,安装 websocket 模块、node-uuid模块。通过在客服端和用户端传递 客服ID 和 用户ID 来进行消息的传送。

三 具体实现

3.1 搭建 Node 服务器

参考本人前面的文章 《Centos6.8 下 Node.js 的安装》。

3.2 安装 ws 模块、node-uuid 模块

npm install ws
npm install ws

3.3 创建 server.js

在项目里面新建一个server.js,创建服务,指定8906端口(下面是主要代码,仅供参考)

const WebSocket = require('ws');
onst wss = new WebSocket.Server({ port: 8906 });
const uuid = require('node-uuid');
// 省略一些参数的定义
// 服务端处理连接
wss.on('connection', function(ws) {
  console.log('client [%s] connected', clientIndex);
  var connection_uuid = uuid.v4();
  var nickname = "AnonymousUser" + clientIndex;
  clientIndex += 1;
  clients.push({ "id": connection_uuid, "ws": ws, "nickname": nickname });
  
 //服务器收到消息时
  ws.on('message', function(e) {
   var data = JSON.parse(e);
   var type = data.type;
   // 省略业务处理逻辑
  });

  // ws连接关闭时触发的操作
  ws.on("close", function () {
   websocketClose();
  });
  
  // 省略函数 websocketClose()、wsSend()、socketClose 的定义
  // 聊天服务器关闭所触发的操作
  process.on("SIGINT", function () {
   console.log("SOCKET CLOSED!");
   ("客服已关闭,请稍后再来");
   process.exit();
  });
});

3.4 创建 customer.html

该页面是用户页面。在页面上建立一个WebSocket的连接,并实现向服务器端发送消息(下面是主要代码,仅供参考)

<script>
  //建立连接
  const ws = new WebSocket("ws://22.33.66.88:8906");
  var client_id = '';
  
  //ws连接打开后的操作
  ws.onopen = function (e) {
   //向服务器发送该ws连接的用户信息
  };

  //收到消息处理
  ws.onmessage = function (e) {
   // 省略
  };
   
  //ws连接出错所触发的操作
  ws.onerror = function (e) {
   // 省略
  };

  //ws连接关闭时所触发的操作
  ws.onclose = function (e) {
   // 省略
  };
   
  // 省略函数 appendLog()、sendMessage()、sendMessage2()、wsSendMessage() 的定义
</script>

 

 3.5 创建 customerService.html

该页面是客服页面,类似于 customer.html,代码方面可参考 customer.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

WebSocket实现Web聊天室功能

本文为大家分享了WebSocket实现Web聊天室的具体代码,供大家参考,具体内容如下

一.客户端

WebSocket实现Web聊天室功能

JS代码如下:

/*
 *   这部分js将websocket封装起来
 */
  var websocket = null;
  //判断当前浏览器是否支持WebSocket
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://localhost:8080/GoodMan/ChatService");
  }
  else {
    alert('当前浏览器 Not support websocket')
  }
  
   //连接成功建立的回调方法
  websocket.onopen = function () {
    alert("WebSocket连接成功");
  }

  //连接发生错误的回调方法
  websocket.onerror = function () {
    alert("WebSocket连接发生错误");
  };
  
   //发送消息
  function sendMess(content) {
     var json ="{'username':'"+'${sessionScope.username }'+"', 'content':'"+content+"'}";
    websocket.send(json);
  }

  //接收到消息的回调方法
  websocket.onmessage = function (event) {
    var jsonString = event.data;    //接收到的信息存放在event.data中
    var data = JSON.parse(jsonString);  //将json字符串转换成js对象
    // 然后输出data
  }

   //连接关闭的回调方法
  websocket.onclose = function () {
    alert("WebSocket连接关闭");
  }

  //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  window.onbeforeunload = function () {
    closeWebSocket();
  }

  //关闭WebSocket连接
  function closeWebSocket() {
    websocket.close();
  }

二.服务器

import java.io.IOException;
import java.util.Date;
import java.util.HashSet;
import java.util.Set;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import com.google.gson.Gson;

class Mess{    //封装一条消息
  private String username;
  private String content;
  private String date;
  public Mess(String username, String content, String date) {
    super();
    this.username = username;
    this.content = content;
    this.date = date;
  }
  public String getUsername() {
    return username;
  }
  public void setUsername(String username) {
    this.username = username;
  }
  public String getContent() {
    return content;
  }
  public void setContent(String content) {
    this.content = content;
  }
  public String getDate() {
    return date;
  }
  public void setDate(String date) {
    this.date = date;
  }
}

@ServerEndpoint("/ChatService")
public class ChatService {      //每进入一个用户,就新建一个ChatService对象
  
  private static int onlineCount = 0; //静态变量, 用来记录当前在线连接数
  private static Set<ChatService> webSocketSet = new HashSet<>();    //静态变量,用来存放在线用户
  private Session session;   //用于存储与该用户的会话,要通过它来给客户端发送数据

  /**
   * 连接建立成功调用的方法
   * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
   */
  @OnOpen
  public void onOpen(Session session){
    this.session = session;
    webSocketSet.add(this);   //加入set中
    addOnlineCount();      //在线数加1
    System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
  }
  
  /**
   * 连接关闭调用的方法
   */
  @OnClose
  public void onClose(){
    webSocketSet.remove(this); //从set中删除
    subOnlineCount();      //在线数减1
    System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
  }

  /**
   * 收到客户端消息后调用的方法
   * @param message 客户端发送过来的消息
   * @param session 可选的参数
   */
  @OnMessage
  public void onMessage(String data, Session session) {
    Mess mess = new Gson().fromJson(data, Mess.class);
    System.out.printf("来%s的消息:%s\n", mess.getUsername(), mess.getContent());
    //群发消息
    for(ChatService item: webSocketSet){
      try {
        item.sendMessage(mess);
      } catch (IOException e) {
        e.printStackTrace();
        continue;
      }
    }
  }
  
  /**
   * 发生错误时调用
   * @param session
   * @param error
   */
  @OnError
  public void onError(Session session, Throwable error){
    System.out.println("发生错误");
    error.printStackTrace();
  }

  //以下为辅助函数
  public void sendMessage(Mess mess) throws IOException{

    String datatime = new java.text.SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(new Date());
    mess.setDate(datatime);
    String jsonInfo = new Gson().toJson(mess);    //将消息对象转换成json字符串
    this.session.getAsyncRemote().sendText(jsonInfo); //通过session异步地将信息发送到客户端上
  }

  public static synchronized int getOnlineCount() {
    return onlineCount;
  }

  public static synchronized void addOnlineCount() {
    ChatService.onlineCount++;
  }

  public static synchronized void subOnlineCount() {
    ChatService.onlineCount--;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

相关电子书
学习笔记
网友NO.674361

php redis 处理websocket聊天记录的实例代码

具体代码如下所示: ?phpini_set('display_errors', 'on');class chatClass { private $redis; //这个变量模拟用户当前状态,是否登录,是否可查看 public $checkUserReadable = false; //构造函数链接redis数据库 public function __construct() { $this - redis = new Redis(); $this - redis - connect('127.0.0.1', '6379'); $this - redis - auth('***cnblogs.com/handle'); } /* 发送消息时保存聊天记录 * 这里用的redis存储是list数据类型 * 两个人的聊天用一个list保存 * * @from 消息发送者id * @to 消息接受者id * @meassage 消息内容 * * 返回值,当前聊天的总聊天记录数 */ public function setChatRecord($from, $to, $message) { $data = array('from' = $from, 'to' = $to, 'message' = $message, 'sent' = time()/*, 'recd' = 0*/); $value = json_encode($data); //生成json字符串 $keyName = 'rec:' . $this - getRecKeyName($from, $to); //echo $keyName; $res = $this - redis - lPush($keyName, $value); if (!$this - checkUserReadabl……

网友NO.814526

使用WebSocket实现即时通讯(一个群聊的聊天室)

随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据。 传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据; 这种客户端是主动方,服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦较小,而 对于涉及实时信息的Web应用却带来了很大的不便,如带有即时通信、实时数据、订阅推送等功能的应用。 在WebSocket规范提出之前,开发人员若要实现这些实时性较强的功能,经常会使用折衷的解决方法:轮询(polling)和Comet技术。其实后者本质上也是一……

网友NO.690185

WebSocket+node.js创建即时通信的Web聊天服务器

本文实例node.js创建即时通信的Web聊天服务器,供大家参考,具体内容如下 1.使用nodejs-websocket nodejs-websocket是基于node.js编写的一个后端实现websocket协议的库, 连接: https://github.com/sitegui/nodejs-websocket 。 (1)安装 在项目目录下通过npm安装:npm install nodejs-websocket (2)创建服务器 //引入nodejs-websocketvar ws = require(“nodejs-websocket”);//调用createServer方法创建服务器,回调函数中的conn是connection的实例var server = ws.create(function(conn){ console.log(“New connection”); //监听text事件,text事件每当从服务器收到文本类型数据时触发,回调函数的参数为传过来的字符串 conn.on(“text”, function(str){ console.log(“Received ” + str); }); //监听close事件,每次断开连接时触发 conn.on(“close”, function(code, reason){ console.log(“Connection closed”); })}).listen(8888); 2.客户端使用websocket 在客户端首先需要实例化……

网友NO.429602

express框架实现基于Websocket建立的简易聊天室

最近想写点有意思的,所以整了个这个简单的不太美观的小玩意 首先你得确认你的电脑装了node,然后就可以按照步骤 搞事情了~~ 1.建立一个文件夹 2.清空当前文件夹地址栏,在文件夹地址栏中输入cmd.exe 3.我们需要下载点小东西 ,需要在命令行输入 npm install express 回车 等待一会 npm install express-session 回车 等待一会 npm install ejs 回车 等待一会 npm install socket.io 回车 等待一会 叮~~~ 搞定!!! 4.安装完成后,在你建的文件夹下 就会有一个 node_modules文件夹,接下来我们还需要建立俩文件夹,一个文件夹(public)存放静态资源,并且添加jquery文件,一个文件夹(views)存放静态模板ejs文件。 5.接下来我们就需要建立一个入口文件(app.js),在你建立的文件夹下 。 6.app.js中必须写的 var express=require('express');var app=express();//加载express web servervar http=require('http').Server(……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

版权投诉 / 书籍推广 / 赞助:QQ:520161757