基于websocket实现简单聊天室对话

本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下

首先搭建一个node的环境,在app.js中写入以下代码

npm install socket.io-client

socket是一个高性能的服务器框架,开发者只要实现一两个接口,便可以开发出自己的网络应用,例如Rpc服务、聊天室服务器、手机游戏服务器等。

npm install http-server

一般提供server服务,参数可以指定端口、地址等等,例如指定服务在8888端口启动,命令为:http-server src -p 8888

npm install koa

Koa 通过 node.js 实现了一个十分具有表现力的 HTTP 中间件框架,力求让 Web 应用开发和 API 使用更加地愉快。Koa的中间件之间按照编码顺序在栈内依次执行,允许您执行操作并向下传递请求(downstream),之后过滤并逆序返回响应(upstream)。

实现代码

// 引入依赖
const koa = require("koa")
// 初始化koa
const app = new koa()
// 开启 http
var server = require("http").createServer(app.callback())
// 初始化 socket
const io = require("socket.io")(server, { cors: true })
// 监听
io.on('connection', (socket) => {
  // 主动向客户端发消息

  setTimeout(() => {
    // 通过io对象方法emit 触发一个自定义事件  并且向客户端发送消息
    io.emit('chat message', '想说点什么?')
  }, 1000)

  socket.on('disconnect', () => {
    console.log('user disconnected')
  })

  // 在服务器收到客户端的消息
  // 通过on方法监听事件  当客户端发送消息时会触发该事件 并且可以接受客户端发来的消息
  socket.on('chat message', (msg) => {
    console.log(msg)
    // msg为客户端发来的消息
    // 发消息给客户端是emit
    setTimeout(() => {
      msg = msg.replace("你", "我").replace("吗", "").replace("?", "!")
      // 触发事件 将处理之后的消息信息发送给客户端
      io.emit('chat message', msg)
    }, 500)
  })
})
server.listen(5522,()=>{
  console.log('socket服务已开启,端口号为5522')
});

调用这个服务

import { io } from 'socket.io-client'
cteated(){
    // 1.创建连接 可以自定义
    this.socket = io('ws://localhost:5522')
     // 2. 建立连接
    this.socket.on('connect', () => {
        console.log('建立连接成功了')
    })
    // 3.监听消息返回
    this.socket.on('chat message', msg => {
        console.log('服务回来的消息', msg)
    })
}

这样就能进行一个简单的人工智能对话了

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

(0)

相关推荐

  • 基于node+websocket+html实现腾讯课堂聊天室聊天功能

    受疫情影响很多中小学选择线上教程,大多数学校采用腾讯课堂直播,那么今天小编给大家分享一段代码关于基于node+websocket+html实现腾讯课堂聊天室聊天功能. 前端部分用到的知识:websocket,h5,contenteditable属性服务端部分:node, websocket部分效果: 功能细节需要注意的地方 前端部分: (1)输入框要可以输入表情图片( 不能用textarea,要用contenteditable='true'来实现) (2)消息数量的显示限制,比如我最多只显示最新

  • 基于websocket实现简单聊天室对话

    本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下 首先搭建一个node的环境,在app.js中写入以下代码 npm install socket.io-client socket是一个高性能的服务器框架,开发者只要实现一两个接口,便可以开发出自己的网络应用,例如Rpc服务.聊天室服务器.手机游戏服务器等. npm install http-server 一般提供server服务,参数可以指定端口.地址等等,例如指定服务在8888端口启动,命令

  • php基于websocket搭建简易聊天室实践

    本文实例讲述了php基于websocket搭建简易聊天室实践.分享给大家供大家参考.具体如下: 1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短连接和长连接.短连接一般可以用ajax实现,长连接就是websocket.短连接实现起来比较简单,但是太过于消耗资源.websocket高效不过兼容存在点问题.websocket是html5的资源 2.前

  • Python基于Socket实现简单聊天室

    本文实例为大家分享了Python基于Socket实现简单聊天室,供大家参考,具体内容如下 服务端 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/7/27 15:34 # @File : Server.py """ 聊天室服务端 """ import socket,select host='' port=7799 addr=(host,port) inputs=[] mem

  • .NET Core 基于Websocket的在线聊天室实现

    什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后就会断开连接. 在没有websocket之前web系统如果要做双工通讯往往使用http long polling技术.http long polling 每次往服务器发送请求后,服务端不会立刻返回信息来结束请求,而是一直挂着直到有数据需要返回,或者等待超时了才会返回.客户端在结束上一次请求后立刻再发

  • C#基于Socket实现简单聊天室功能

    因为这段时间在学习Socket,所以就试着写了一个简单的聊天室.主要分为服务器端和多个客户端.利用服务器端作数据中转站,实现消息群发. 1.服务器端有两个类: using System.Collections.Generic; using System.Net; using System.Net.Sockets; namespace 聊天室_Socket_TCP_服务器端 {     class Program     {         static List<Client> clients

  • java基于netty NIO的简单聊天室的实现

    一.为何要使用netty开发 由于之前已经用Java中的socket写过一版简单的聊天室,这里就不再对聊天室的具体架构进行细致的介绍了,主要关注于使用netty框架重构后带来的改变.对聊天室不了解的同学可以先看下我的博客(<JAVA简单聊天室的实现>) 本篇博客所使用的netty版本为4.1.36,完整工程已上传到Github(https://github.com/Alexlingl/Chatroom),其中lib文件夹下有相应的netty jar包和source包,自行导入即可. 1.为何要

  • C++基于socket UDP网络编程实现简单聊天室功能

    本文实例为大家分享了C++基于socket UDP实现简单聊天室功能的具体代码,供大家参考,具体内容如下 0.通信步骤流程图 (左:服务器:右:客户端:) 1.服务器代码 1.1服务器类头文件(CServer_UDP.h) #pragma once #include <winsock2.h> class CServer_UDP { public: CServer_UDP(); void SendMsg(const char sendBuf[]); void RecMsg(); ~CServer

  • vue基于websocket实现智能聊天及吸附动画效果

    目录 前言: 1.效果如下: 2.主要功能: 2.1.基于websocket实现聊天功能,封装了一个socket.js文件 2.2使用Jwchat插件实现类似QQ.微信电脑端的功能 2.3动画效果(如关闭打开时动画.吸附效果及其他效果) 3.实现步骤: 3.1.实现websocket聊天功能 3.2.在页面中的使用方法: 关闭连接 发送给后端的方法 4.使用Jwchat插件实现类似QQ.微信电脑端的功能 4.1步骤 5.动画效果 前言: 发现这篇文章写的有点多,我总结一下整体思路: 首先这个功能

  • 使用Java和WebSocket实现网页聊天室实例代码

    在没介绍正文之前,先给大家介绍下websocket的背景和原理: 背景 在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况,HTML5定义了WebSocket协议,能更

  • Python socket实现简单聊天室

    本文实例为大家分享了Python socket实现简单聊天室的具体代码,供大家参考,具体内容如下 服务端使用了select模块,实现了对多个socket的监控.客户端由于select在Windows下只能对socket使用,所以使用了多线程来实现对客户端输入和socket连接的同时监控.注意这里的socket设置为了非阻塞.这样就实现了在一个线程中同时进行socket的接收和发送. 服务器代码: # -*- coding: utf-8 -*- import socket,select conne

随机推荐