快捷導(dǎo)航

基于websocket實(shí)現(xiàn)簡單聊天室對(duì)話

更新時(shí)間：2021年07月01日 17:21:11 作者：晚星@

這篇文章主要為大家詳細(xì)介紹了基于websocket實(shí)現(xiàn)簡單聊天室對(duì)話，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了websocket實(shí)現(xiàn)簡單聊天室對(duì)話的具體代碼，供大家參考，具體內(nèi)容如下

首先搭建一個(gè)node的環(huán)境，在app.js中寫入以下代碼

npm install socket.io-client

socket是一個(gè)高性能的服務(wù)器框架，開發(fā)者只要實(shí)現(xiàn)一兩個(gè)接口，便可以開發(fā)出自己的網(wǎng)絡(luò)應(yīng)用，例如Rpc服務(wù)、聊天室服務(wù)器、手機(jī)游戲服務(wù)器等。

npm install http-server

一般提供server服務(wù),參數(shù)可以指定端口、地址等等，例如指定服務(wù)在8888端口啟動(dòng)，命令為：http-server src -p 8888

npm install koa

Koa 通過 node.js 實(shí)現(xiàn)了一個(gè)十分具有表現(xiàn)力的 HTTP 中間件框架，力求讓 Web 應(yīng)用開發(fā)和 API 使用更加地愉快。Koa的中間件之間按照編碼順序在棧內(nèi)依次執(zhí)行，允許您執(zhí)行操作并向下傳遞請求（downstream），之后過濾并逆序返回響應(yīng)（upstream）。

實(shí)現(xiàn)代碼

// 引入依賴
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 })
// 監(jiān)聽
io.on('connection', (socket) => {
  // 主動(dòng)向客戶端發(fā)消息

  setTimeout(() => {
    // 通過io對(duì)象方法emit 觸發(fā)一個(gè)自定義事件  并且向客戶端發(fā)送消息
    io.emit('chat message', '想說點(diǎn)什么？')
  }, 1000)

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

  // 在服務(wù)器收到客戶端的消息
  // 通過on方法監(jiān)聽事件  當(dāng)客戶端發(fā)送消息時(shí)會(huì)觸發(fā)該事件 并且可以接受客戶端發(fā)來的消息
  socket.on('chat message', (msg) => {
    console.log(msg)
    // msg為客戶端發(fā)來的消息
    // 發(fā)消息給客戶端是emit
    setTimeout(() => {
      msg = msg.replace("你", "我").replace("嗎", "").replace("？", "!")
      // 觸發(fā)事件 將處理之后的消息信息發(fā)送給客戶端
      io.emit('chat message', msg)
    }, 500)
  })
})
server.listen(5522,()=>{
  console.log('socket服務(wù)已開啟,端口號(hào)為5522')
});

調(diào)用這個(gè)服務(wù)

import { io } from 'socket.io-client'
cteated(){
    // 1.創(chuàng)建連接 可以自定義
    this.socket = io('ws://localhost:5522')
     // 2. 建立連接
    this.socket.on('connect', () => {
        console.log('建立連接成功了')
    })
    // 3.監(jiān)聽消息返回
    this.socket.on('chat message', msg => {
        console.log('服務(wù)回來的消息', msg)
    })
}

這樣就能進(jìn)行一個(gè)簡單的人工智能對(duì)話了