关键词：
一、安装socket.io
npm i socket.io --save
二、使用
第一种：服务端使用原生node
// 创建http服务器
const http = require('http')
var fs = require('fs')
const app = http.createServer()
app.on('request', (req, res) =>
fs.readFile(__dirname + '/index.html', function (err, data)
if (err)
res.writeHead(500)
return res.end('Error loding!')
res.writeHead(200)
res.end(data)
)
)
app.listen(3000, () =>
console.log('服务器启动成功，正在监听3000端口...')
)
const io = require('socket.io')(app, cors: true ) // cors: true 表示允许跨域
// socket.emit() 表示发送某个事件
// socket.on() 表示监听某个事件
// 监听了用户连接的事件
io.on('connection', socket =>
console.log('新用户连接了！')
// socket.emit() 标识给浏览器发送数据
// 参数1： 事件的名字
socket.emit('send', name: 'zep' )
)
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index2</title>
</head>
<body>
<h2>哈哈哈哈</h2>
<script src="/socket.io/socket.io.js"></script>
<script>
// 连接socket服务
var socket = io.connect('ws://localhost:3000')
// 监听send事件，得到服务器返回的数据
socket.on('send', (data) =>
console.log(data);
)
</script>
</body>
</html>
第二种： 服务端使用express
var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server, cors: true )
server.listen(3000, () =>
console.log('服务器启动成功，正在监听3000端口...')
)
app.get('/', function (req, res)
res.sendFile(__dirname + '/index.html')
)
io.on('connection', function (socket)
console.log('新用户连接了！')
socket.emit('send', name: 'zep' )
socket.on('other', function (data)
console.log(data);
)
)
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index2</title>
</head>
<body>
<h2>哈哈哈哈</h2>
<script src="/socket.io/socket.io.js"></script>
<script>
// 连接socket服务
var socket = io.connect('ws://localhost:3000')
// 监听send事件，得到服务器返回的数据
socket.on('send', (data) =>
console.log(data);
)
socket.emit('other', age: 22 )
</script>
</body>
</html>
三、案例 ： 聊天机器人（结合天行机器人api）
1. 使用express搭建后端服务器（结合socket.io）
var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server, cors: true )
const axios = require("axios");
server.listen(3000, () =>
console.log('服务器启动成功，正在监听3000端口...')
)
app.get('/', function (req, res)
res.sendFile(__dirname + '/index.html')
)
async function sendToRobot(data)
let response = await axios(
method: "GET",
url: 'http://api.tianapi.com/txapi/robot/index',
params:
key: '5fb41161af56441feef854fc',
question: data
)
console.log(typeof (response.data))
console.log(response.data.newslist[0].reply)
return response.data
io.on('connection', function (socket)
console.log('新用户连接了！')
socket.on('send',async function (data)
// 给天行聊天机器人接口发送请求
let response = await axios(
method: "GET",
url: 'http://api.tianapi.com/txapi/robot/index',
params:
key: '5fb41161aff1256441d57eef854fc',
question: data
)
const newData =
// msg: data.msg + '？？？',
msg: response.data.newslist[0].reply,
timestamp: Date.now()
socket.emit('msg', newData)
)
)
2. 在vue前端中使用：
<template>
<div class="user-chat">
<!--导航栏-->
<van-nav-bar
class="app-nav-bar"
title="小智同学"
left-arrow
@click-left="$router.back()"
/>
<!--消息列表-->
<van-cell-group class="message-list" ref="message-list">
<!-- <div v-for="(item, index) in messages" :key="index">-->
<van-cell class="message-item" center v-for="(item, index) in messages" :key="index">
<div class="message-item-right" v-if="index % 2 ===0">
<div class="message-item-text"> item.msg </div>
<van-image
width="40"
height="40"
round
src="https://img01.yzcdn.cn/vant/apple-1.jpg"
/>
</div>
<div class="message-item-left" v-else>
<van-image
width="40"
height="40"
round
src="https://img01.yzcdn.cn/vant/cat.jpeg"
/>
<div class="message-item-text"> item.msg </div>
</div>
</van-cell>
<!-- </div>-->
</van-cell-group>
<!--发送消息-->
<van-cell-group class="send-message-wrap">
<van-field v-model="message"
placeholder="请输入消息"
:border="false"
/>
<van-button size="small"
type="primary"
class="sendBtn"
@click="onSend"
>发送</van-button>
</van-cell-group>
</div>
</template>
<script>
import io from 'socket.io-client'
import setItem, getItem from '../../utils/storage'
export default
name: 'UserChat',
data ()
return
message: '',
socket: null, // WebSocket通信对象
messages: getItem('chat-messages') || [] // 消息列表
,
watch:
// 监视messages，只要messages的值发生改变就把当前的messages存到本地存储中
messages ()
setItem('chat-messages', this.messages)
// 如果你要在操作数据之后立即操作数据影响的视图DOM，
// 那么最好放在$nextTick()中
// 数据改变影响视图更新这件事不是立刻的
this.$nextTick(() =>
// 每次有新消息时，让消息列表滚动到最底部
this.scrollToBottom()
)
,
mounted ()
this.scrollToBottom()
,
created ()
const socket = io('ws://localhost:3000')
this.socket = socket
window.socket = socket
socket.on('connect', function ()
console.log('连接建立成功了！')
)
// 监听 message 事件，接收服务端消息
socket.on('msg', (data) =>
// 把对方发给我的消息放到数组中
this.messages.push(data)
console.log(data)
)
socket.on('disconnect', function ()
console.log('断开连接了')
)
,
methods:
onSend ()
// 请求发送消息
const data =
msg: this.message,
timestamp: Date.now()
this.socket.emit('send', data)
// 把用户发出去的消息存储到数组中
this.messages.push(data)
// 清空输入框的内容
this.message = ''
,
scrollToBottom ()
const list = this.$refs['message-list']
list.scrollTop = list.scrollHeight
</script>
<style scoped lang="less">
.send-message-wrap
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
padding: 0 10px;
.sendBtn
width: 20%;
.message-list
position: fixed;
left: 0;
right: 0;
top: 46px;
bottom: 44px;
overflow-y: auto;
.message-item
color: red;
display: flex;
align-items: center;
.message-item-right
display: flex;
align-items: center;
justify-content: flex-end;
.message-item-left
display: flex;
align-items: center;
justify-content: flex-start;
.message-item-text
margin: 0 15px;
</style>
一个关于vue+mysql+express的全栈项目------实时聊天部分socket.io(代码片段)
...websocket，为了快速开发，本项目我们采用socket.io（客户端使用socket.io-client）Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从... 查看详情
使用node.js+socket.io搭建websocket实时应用
Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。作者：潘良虎链接：https://www... 查看详情
使用 node.js、websockets 和 socket.io 创建实时聊天
】使用node.js、websockets和socket.io创建实时聊天【英文标题】：Createlivechatusingnode.js,websocketsandsocket.io【发布时间】：2016-06-2103:08:55【问题描述】：我知道如何使用websockets从客户端连接到服务器端，只需编写以下代码：varconnection=new... 查看详情
node.jswebsocket使用socket.io库实现实时聊天室
认识websocketWebSocketprotocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。其实websocket并不是很依赖Http协议，它也拥有自己的一套协议机制，但在这里我们需要利用的socket... 查看详情
基于socket.io+koa2+天行机器人实现简单人机实时通讯(nginx处理socket.iohttps代理问题)(代码片段)
先上实现结果(免费的机器人真的是一言难尽)需要注意的点需要处理开发环境的跨域问题、见代码由于服务器使用了https协议，所以客户端需要用wss。因为我用nginx进行https的转发，因此也需要在nginx上做同步配置(配置在下... 查看详情
实时聊天、消息处理 - Socket.io、PHP、MySQL、Apache
...在开发一个完全基于PHP和JS/jQuery的实时聊天网站（我没有使用任何框架）。目前，我的设置只是简单的AJAX轮询，这显然不如我想要的那么好 查看详情
聊天功能插件socket.io(代码片段)
一、Socket.io是什么 是基于时间的实时双向通讯库 基于websocket协议的 前后端通过时间进行双向通讯 配合express快速开发实时应用二、Socket.io和ajax区别 基于不同的网络协议 ajax基于http协议，单向，实时获取... 查看详情
使用nodesocket.io搭建简易聊天室
...Socket.io客户端之间全双工通信信道尽可能使用WebSocket连接建立(”尽可能“就说明要求客户端和服务端都必须使用http://socket.io的解决方案)，并将使用HTTP长轮询作为后备。在了解socket-io前，我们... 查看详情
socket.io入门，简易聊天室(代码片段)
介绍通常我们web使用的是http协议，但是HTTP协议有一个缺陷：通信只能由客户端发起。所以我们需要一个可以由服务端主动发出的协议，即WebSocket。WebSocket是HTML5新增的一种通信协议，其特点是服务端可以主动向客户端推送信息... 查看详情
如何实现 Laravel、node.js、socket.io 和 redis 以使用数据库创建实时聊天/通知
】如何实现Laravel、node.js、socket.io和redis以使用数据库创建实时聊天/通知【英文标题】：HowtoimplementLaravel,node.js,socket.ioandredisforcreatingrealtimechat/notificationswithdatabase【发布时间】：2018-08-0205:54:42【问题描述】：我已经花了3天的时间... 查看详情
使用socket.io开发聊天室
前言Socket.IO是一个用来实现实时双向通信的框架，其本质是基于WebSocket技术。我们首先来聊聊WebSocket技术，先设想这么一个场景：·用户小A，打开了某个网站的充值界面，该界面上有一个付款的二维码。·当小A用某宝的APP扫码... 查看详情
Socket IO 在本地机器上工作正常，但在 Heroku 上不工作
...发布时间】：2019-10-1214:07:38【问题描述】：情况：我正在使用ReactJS和ExpressJS构建一个Web应用程序（SPA）。我正在使用Socket.IO进行实时聊天。当我构建我的应用程序并在localhost上运行它时，一切正常， 查看详情
socket.io在线聊天室
socket.io在线聊天室由David发表在天码营 socket.io是一个JavaScript库，用来建立实时的WebApp。socket.io可以通过npm安装到Node.js的应用中，同时浏览器和服务器拥有同样的API接口。你还在思考socket.io是如何做到实时推送的么？... 查看详情
在 PHP 中使用 Node.js、Socket.io、Redis 的私人聊天消息
】在PHP中使用Node.js、Socket.io、Redis的私人聊天消息【英文标题】：PrivateChatMessagingusingNode.js,Socket.io,RedisinPHP【发布时间】：2016-09-1120:47:27【问题描述】：我正在为我的php应用程序中的实时私人消息传递系统工作。我的代码适用于... 查看详情
使用socket.io实现简单的聊天功能(代码片段)
Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法首先得在你的项目中安装socket.io$npminstallsocket.io服务端代码：varapp=require(‘http‘).createServer()vario=require(‘socket.io‘)(app)varPORT=5555;varclientCount=0;app 查看详情
RESTful Api 或 Socket.IO
...需要在服务器和客户端之间建立双向实时连接（例如聊天机器人或股票 查看详情
感谢有“你”-------socket.io(代码片段)
我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈---涛涛技术客栈。今天学习了websocket的一个框架---socket.io后瞬间感觉神清气爽，顿感从无尽的回调函数中解脱出... 查看详情
使用 mern 堆栈和 socket.io 的聊天应用程序在发送超过 20 条消息后变慢
】使用mern堆栈和socket.io的聊天应用程序在发送超过20条消息后变慢【英文标题】：chatappusingmernstackandsocket.iogettingslowaftersendingmorethan20messages【发布时间】：2021-06-1406:59:40【问题描述】：我正在使用MERN堆栈和socket.io构建一个实时聊... 查看详情